我需要使用CSS、JavaScript或Jquery制作“只读 div”。不仅是文本框,而是整个 div
。该div包含任何内容(图像、其他div、文本框等)。
这应该被所有浏览器支持。
有什么想法吗?
我需要使用CSS、JavaScript或Jquery制作“只读 div”。不仅是文本框,而是整个 div
。该div包含任何内容(图像、其他div、文本框等)。
这应该被所有浏览器支持。
有什么想法吗?
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 />
标签完全不可编辑,请在标签上放置 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>
<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');
});
<a>
标签和 <div>
标签是只读的,您是指停止所有互动吗? - Daniel Imms<div>
来完成的,以便点击事件不会穿过。使用Noval的pointer-events:none;
与此readonly
属性解决方案相结合也可以实现相同的效果。我认为用户仍然可以切换到<a>
标签。 - Daniel Imms很抱歉,你无法使用CSS来控制元素的行为。
CSS代表层叠样式表-它只用于样式元素。
但是你可以使用JavaScript。
未经测试的jQuery示例如下:
$('#myDiv').children().attr('readonly', true);
请尝试以下操作:
脚本部分:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#previewDiv :input").attr("disabled", true);
});
</script>
HTML部分:
<div id="previewDiv">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<input type="text" name="test" value="test">
</div>
$("div").prop("readonly", true);
<div>
<input type="text" value="value" /> <br />
<textarea>value</textarea>
</div>
$('div *').prop('disabled',true);
的意思是将所有 div 元素下的子元素都设置为禁用状态。