CSS或JavaScript中的只读目录
CSS或JavaScript中的只读目录
提问于 2013-03-20 13:34:06
我需要使‘只读div’使用CSS或JavaScript或Jquery。不仅仅是文本框之类的。完整的div。该div包含任何内容(image、、其他div、文本框等)
它应该被所有浏览器支持。
有什么想法吗？
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-03-20 13:43:09
您可以使用pointer-events: none;在某些元素上禁用鼠标DOM交互(如单击、悬停等)。示例：
div {
pointer-events: none;
}<div>
<input type="text" value="value" />
<br />
<textarea>value</textarea>
</div>
但是，即使pointer-events: none;在那里，仍然可以使光标聚焦在元素(或其子元素)上。这意味着如果我们将光标焦点移到<input />标记上，就可以编辑值。
示例:尝试单击<input />标签，然后按键盘上的tab，光标焦点将位于input上，使其可编辑。
要使<input />标记完全不可编辑，请在标记上添加readonly属性。下面是使用jQuery .prop()执行此操作的简单示例。您也可以根据需要将属性直接放在标签上。
$("input, textarea").prop("readonly", true);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" value="value" />
<br />
<textarea>value</textarea>
</div>
Stack Overflow用户
发布于 2013-03-20 13:46:03
不幸的是，您需要的是HTML元素上的readonly属性。您可以很容易地使用JavaScript实现您想要的功能，下面是一个使用jQuery的示例。
HTML
<div class="readonly">
<input type="text" />
<div><input type="checkbox" /> Blah</div>
<textarea>abc</textarea>
</div>JavaScript
$(document).ready(function() {
$('.readonly').find('input, textarea, select').attr('readonly', 'readonly');
});Stack Overflow用户
发布于 2013-03-20 13:37:44
我担心，你不能用CSS控制元素的行为。
CSS代表层叠样式表-它只用于样式化元素。
但是你可以使用JavaScript。
上面未经测试的jQuery示例：
$('#myDiv').children().attr('readonly', true);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15516084
复制相关文章
相似问题
腾讯云开发者
