如何禁用输入类型=文本？

Question

text如果可能的话,我想在使用JavaScript 的类型的输入字段中禁用写入.输入字段从数据库填充; 这就是为什么我不希望用户修改其值.

Answer 1

document.getElementById('foo').disabled = true;

编辑

要么

document.getElementById('foo').readOnly = true;

请注意,readOnly应该在CamelCase中才能在Firefox中正常工作(魔术).

这对我有用.Jquery版本是$('input').prop('disabled',true) (3认同)
您一点也不迟，魔力仍然存在（：我不记得当时测试过的平台，但是今天，“ readonly”（小写）在Ubuntu 52上的Firefox 52中仍然不起作用-应该是骆驼香烟盒。 (2认同)

Answer 2

如果您在页面呈现时知道这一点,这听起来像是因为数据库有值,那么最好在呈现而不是JavaScript时禁用它.要做到这一点,只需添加readonly属性(或者disabled,如果你想将它从表单提交中删除)<input>,就像这样:

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

我不知道为什么这会得到投票,它不回答这个问题.我们期待javascript的答案. (70认同)
只读+1!并非所有人都提到这一点. (18认同)
禁用模式可防止输入框上的单击事件,而readonly则不会.仅供参考. (6认同)
请记住，浏览器可以随意忽略“禁用”或“只读”属性，并且不应依赖此方法来可靠地防止数据更新……如果处理表单的服务器端代码仍将接受一个来自该字段的值并更新它，任何有足够智慧来创建自己的表单的人都可以绕过这个“禁用”......这只是为了在受信任的环境中方便用户界面。防止它的真正方法是使用服务器端逻辑。 (4认同)
@Sophie，这是问询者根据自己的情况采取的最正确方法，也许是标题更改。 (2认同)

Answer 3

如果从数据库填充数据,您可能会考虑不使用<input>标记来显示它.不过,你可以在标签中禁用它:

<input type='text' value='${magic.database.value}' disabled>

如果您以后需要使用Javascript禁用它,可以设置"禁用"属性:

document.getElementById('theInput').disabled = true;

我建议不显示价值的原因<input>是,根据我的经验,它会导致布局问题.如果文本很长,那么<input>用户将需要尝试滚动文本,这不是普通人想要做的事情.如果你只是将它放入某种<span>东西中,那么你就拥有更多的造型灵活性.

请记住,禁用可以使文本在某些浏览器上几乎不可读.使用readonly属性可能会更好,例如<input type ="text"value ="foo"readonly> (3认同)

Answer 4

你也可以通过jquery:

$('#foo')[0].disabled = true;

工作范例:

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

Answer 5

获取您喜欢的输入框的引用(例如document.getElementById('mytextbox'))并将其readonly属性设置为true:

myInputBox.readonly = true;

或者,您可以简单地添加此属性内联(无需JavaScript):

<input type="text" value="from db" readonly="readonly" />