jQuery CSS 或 JavaScript 中的只读 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15516084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
readonly div in CSS or JavaScript
提问by KarSho
I need to make 'read-only div' using with CSS or JavaScript or Jquery. Not only text-box and all. Full div. That div contain anything(image, ,other div,text-box,...)
我需要使用 CSS 或 JavaScript 或 Jquery制作“只读div”。不仅文本框和所有。满div。该 div 包含任何内容（图像、其他 div、文本框、...）
That should support by all Browser.
所有浏览器都应该支持。
Any idea?
任何的想法？
回答by novalagung
You could use pointer-events: none;to disable mouse DOM interaction (like click, hover, etc) on certain element. Example:
您可以使用pointer-events: none;禁用某些元素上的鼠标 DOM 交互（如单击、悬停等）。例子：
div {
pointer-events: none;
}<div>
<input type="text" value="value" />
<br />
<textarea>value</textarea>
</div>However, even though pointer-events: none;is there, it's still possible to make the cursor to be focus on the element (or it's children). Meaning if we move the cursor focus on the <input />tag, then it's possible to edit the value.
但是，即使pointer-events: none;存在，仍然可以使光标聚焦在元素（或其子元素）上。这意味着如果我们将光标焦点移到<input />标签上，则可以编辑该值。
Example: try to click the <input />tag, then press tabin keyboard, the cursor focus will be on input, making it editable.
示例：尝试单击<input />标签，然后在键盘上按Tab，光标焦点将在输入上，使其可编辑。
To make <input />tag completely un-editable, put readonlyattribute on the tag. Below is simple example to do it by using jQuery .prop(). You can also put the attribute directly on the tag, depending on the needs.
要使<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>回答by Daniel Imms
You can't do this with CSS unfortunately, you're after the readonlyattribute on HTML elements. You can pretty easily accomplish what you want using JavaScript, here's an example with jQuery.
不幸的是，你不能用 CSS 做到这一点，你readonly在找 HTML 元素的属性。你可以很容易地使用 JavaScript 完成你想要的，这里有一个使用 jQuery 的例子。
HTML
HTML
<div class="readonly">
<input type="text" />
<div><input type="checkbox" /> Blah</div>
<textarea>abc</textarea>
</div>
JavaScript
JavaScript
$(document).ready(function() {
$('.readonly').find('input, textarea, select').attr('readonly', 'readonly');
});
回答by Edward Ruchevits
I am afraid, you can't control elements behavior with CSS.
恐怕，您无法使用 CSS 控制元素行为。
CSS stands for Cascading Style Sheets - it's only for styling elements.
CSS 代表级联样式表 - 它仅用于样式元素。
But you can use JavaScript.
但是您可以使用JavaScript.
Untested jQueryexample above:
jQuery上面未经测试的示例：
$('#myDiv').children().attr('readonly', true);
回答by John Peter
Just Try With The Following :
只需尝试以下操作：
Script Part :
脚本部分：
<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 Part :
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>
I think this may help you to resolve your problem.
我认为这可以帮助您解决问题。
回答by sairamch
$("div").prop("readonly", true);
<div>
<input type="text" value="value" /> <br />
<textarea>value</textarea>
</div>
