我知道通过应用readonlyboolean属性将输入元素设为只读,并且该属性不受CSS的影响。
readonly
另一方面,我的情况似乎非常适合CSS,因此我希望可以使用某种CSS技巧来实现。我的表格上有 可打印的版本 超链接。单击它会显示文档的可打印版本。它主要是CSS东西,我的print.css看起来像这样:
html.print { width: 8.57in; } .print body { font: 9pt/1.5 Arial, sans-serif; margin: 0 1in; overflow: auto; } .print #header, .print #footer { display: none; } .print .content { background-color: white; overflow: auto; } .print .fieldset > div.legend:first-child { background: white; } .print ::-webkit-input-placeholder { /* WebKit browsers */ color: transparent; } .print :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: transparent; } .print ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: transparent; } .print :-ms-input-placeholder { /* Internet Explorer 10+ */ color: transparent; } .print .check-mark { display: inline; } .print input[type=checkbox] { display: none; } .print .boolean-false { display: none; }
还有一些javascript片段,例如:
print
我当前的问题是输入字段。它们应该是只读的,但是,我不知道如何以最少的代码更改来做到这一点。CSS可能是一个完美的解决方案。
有任何想法吗?
仅使用CSS?使用user-select:none以下命令可以在文本输入上实现:
user-select:none
.print { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
值得注意的是,这在不支持CSS3或不支持user-selectproperty的浏览器中将不起作用。readonly理想情况下,应将该属性提供给希望将其设置为只读的输入标记,但这确实可以作为CSS的替代方法。
user-select
使用JavaScript:
document.getElementById("myReadonlyInput").setAttribute("readonly", "true");
编辑: CSS方法在Chrome(29)中不再起作用。-webkit-user-select现在,该属性似乎在输入元素上被忽略。
-webkit-user-select