是否可以通过CSS使输入字段为只读？
mar*_*ark 37 html javascript css printing css3
我知道输入元素是通过应用readonly布尔属性而成为只读的,并且是一个不受CSS影响的属性.
另一方面,我的场景似乎非常适合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类添加到html元素 - 显示没有滚动条的表格
- 一些其他小事,比如隐藏任何弹出叠加层.
我目前的问题是输入字段.它们应该是只读的,但是,我不知道如何以最少的代码更改来完成它.CSS可能是一个完美的解决方案.
有任何想法吗？
Jam*_*lly 31
仅限CSS？通过使用user-select:none以下方式,这在文本输入上是可行的:
.print {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
值得注意的是,这不适用于不支持CSS3或支持该user-select属性的浏览器.readonly理想情况下,该属性应该是您希望只读取的输入标记,但这确实可以作为一种hacky CSS替代方案.
使用JavaScript:
document.getElementById("myReadonlyInput").setAttribute("readonly", "true");
编辑: CSS方法不再适用于Chrome(29).-webkit-user-select现在,输入元素上的属性似乎被忽略.
- 使用firefox 27,"user-select:none"仅阻止我使用鼠标选择字段中的文本,但不使用键盘快捷键(Shift +箭头),这是荒谬的,或更改其内容(删除,写入).在Opera 12下,这个领域完全正常. (2认同)
Jee*_*Mok 13
read-onlyHTML 中的属性用于创建不可编辑的文本输入。但是在 CSS 的情况下，该pointer-events属性用于停止指针事件。
句法：
pointer-events: none;
示例：此示例显示了两个输入文本，其中一个是不可编辑的。
<!DOCTYPE html>
<html>
<head>
<title>
Disable Text Input field
</title>
<style>
.inputClass {
pointer-events: none;
}
</style>
</head>
<body style = "text-align:center;">
Non-editable:<input class="inputClass" name="input" value="NonEditable">
<br><br>
Editable:<input name="input" value="Editable">
</body>
</html>
- 仍然可以通过按 Tab 键浏览元素来对其进行编辑。 (2认同)
Fau*_*ust 11
(通过当前浏览器)不能仅通过CSS使输入字段成为只读.
但是,正如您已经提到的,您可以应用该属性readonly='readonly'.
如果你的主要标准是不改变源代码中的标记,那么可以通过javascript以不显眼的方式获取它.
使用jQuery,这很容易:
$('input').attr('readonly', true);
或者甚至使用普通的Javascript:
document.getElementById('someId').setAttribute('readonly', 'readonly');
- 一两个错别字,查询1.9+它应该是`$('input').prop('readonly',true);` (2认同)
| 归档时间： |
|
| 查看次数： |
112246 次 |
| 最近记录： |