如何使文本输入不可编辑？

Question

所以我有一个文本输入

<input type="text" value="3" class="field left">

这是我的 CSS 是否

background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px; 

有一个设置或技巧，我正在考虑做一个标签而不是样式。我如何转换它们，有更好的方法还是唯一的方法？

Answer 1

<input type="text" value="3" class="field left" readonly>

无需造型。

请参阅 MDN 上的 https ://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

Answer 2

您可以将属性 readonly 添加到输入：

<input type="text" value="3"
       class="field left" readonly="readonly">

更多信息：
http://www.w3schools.com/tags/att_input_readonly.asp

Answer 3

如果您希望仅读取输入，则可以使用 readonly 属性。如果您希望显示输入但完全禁用（即使像 PHP 这样的处理语言也无法读取这些内容），您可以使用 disabled 属性。

Answer 4

只是为了完成可用的答案：

输入元素可以是只读的或禁用的（它们都不可编辑，但有一些区别：焦点，...）

可以在这里找到很好的解释：
HTML表单输入字段的disabled=“disabled”和readonly=“readonly”有什么区别？

使用方法：

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

有还有一些通过 CSS 或 JavaScript 实现的解决方案，如此处所述。

Answer 5

如果您确实想使用 CSS，请使用以下属性，这将使字段不可编辑。

pointer-events: none;

Answer 6

添加 readonly：

<input type="text" value="3" class="field left" readonly>

如果您希望不在表单中提交值，请添加 disabled 属性。

<input type="text" value="3" class="field left" disabled>

没有办法使用总是有效的 CSS 来做到这一点。

为什么？ CSS 不能“禁用”任何东西。您仍然可以关闭显示或可见性并使用 pointer-events: none，但 pointer-events 不适用于 IE 11 之前发布的 IE 版本。

Answer 7

<input type="text" value="3" class="field left" readonly>

您可以在 https://www.w3schools.com/tags/att_input_readonly.asp 中看到

设置“readonly”的方法：

$("input").attr("readonly", true)

取消“readonly”（在jQuery中工作）：

$("input").attr("readonly", false)

Answer 8

你只需要在最后添加 disabled

<input type="text" value="3" class="field left" disabled>

Answer 9

每个输入都必须有只读或可编辑字段，因此请使用它

Answer 10

readonly 和 disabled 将起作用。但如果你想发送输入值，只需使用 readonly 并编辑你的 css .field left:focus{ Outline: none }

Answer 11

在某些情况下，您只想使输入元素不可编辑或不可更改，这意味着文本光标仍然可以放置在那里，并且光标可以四处移动，但只有文本保持不变。它与只读或禁用不同。

1. 纯JS(jsfiddle)

document.getElementById('input')
  .addEventListener('keydown', (e) => {
  var field = e.target;
  var oldValue = field.value;
  setTimeout(function () {
    if(field.value !== oldValue) {
      field.value = oldValue;
    } 
  }, 1);
  })

<input id="input", type="text" value="default" class="field left">

2. 使用 JQuery(jsfiddle)

$("input").keydown(function(e) {
var oldValue=$(this).val();
var field=this;
setTimeout(function () {
    if(field.value !== oldValue) {
        $(field).val(oldValue);
    } 
}, 1);
});

<input id="input", type="text" value="default" class="field left">

Answer 12

如果您正在寻找 React 那么您可以尝试：

<input type="text" value="John" readOnly={true}/>

Answer 13

您也可以使用 JavaScript 来完成：

<input id="my-input" type="text" value="3" />

<script>
  document.querySelector("#my-input").readOnly = false;
</script>