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

123

text如果可能，我想禁用使用JavaScript 输入类型的输入。输入字段是从数据库填充的；这就是为什么我不希望用户修改其值的原因。

javascript html

— Kawtousse
source

172

如果您在呈现页面时就知道了这一点，这听起来像您所做的那样，因为数据库具有一个值，最好在呈现页面时禁用它而不是JavaScript。为此，只需将readonly属性（或者disabled，如果您也希望从表单提交中将其删除）添加到<input>，如下所示：

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

— 尼克Craver
source

81

我不知道为什么要投票，它不能回答问题。我们期待着JavaScript的答案。

— 索菲（Sophie）

3

@Sophie，这是问询者根据自己的情况采取的最正确方法，也许是标题更改。

— 尼克·克拉弗

6

禁用模式可防止在输入框中单击事件，而只读则不会。费。

— knutole 2014年

要使“只读”输入字段像“禁用”字段一样进入“查找”状态，请设置“ style =“ color：grey; background-color：＃F0F0F0;””。（这是对此答案的评论）

— 杰克·多伦多

2

请记住，浏览器可以随意忽略“ disabled”或“ readonly”属性，并且不应依赖此方法来可靠地防止数据被更新...如果处理该表单的服务器端代码仍将接受来自该字段的值并进行更新，任何有足够知识来创建自己的表单的人都可以绕过此“禁用”……这仅是为了在可信任的环境中为用户界面提供方便。防止这种情况发生的真正方法是使用服务器端逻辑。

— 亚伦·瓦伦丁

205

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

要么

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

请注意，readOnly应该在camelCase中才能在Firefox（魔术）中正常工作。

演示：https : //jsfiddle.net/L96svw3c/-稍微解释了disabled和之间的区别readOnly。

— 胡多列耶夫
source

3

这对我有用。jQuery版本为$（'input'）。prop（'disabled'，true）

— Daniel Sun Yang

我已经迟了七年了-但是2017年这两者之间在语义上有什么不同吗？

— Jules

2

您一点也不迟，魔力仍然存在（：我不记得当时测试过的平台，但是今天readonly（小写）在Ubuntu 52上的Firefox 52中仍然不起作用-应该是驼峰式的。

— hudolejev

为什么这对我不起作用？我做了一个input元素，id="gate"然后尝试了您的代码，这似乎对我不起作用...

— Voldemort的愤怒，

21

如果数据是从数据库填充的，则可以考虑不使用<input>标签来显示它。不过，您可以在标记中将其禁用：

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

如果以后需要使用Javascript禁用它，则可以设置“ disabled”属性：

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

根据<input>我的经验，我建议不显示该值的原因是它会引起布局问题。如果文本很长，那么<input>用户将需要尝试滚动文本，这是普通人不会想到的。如果只是将其放入<span>或某物中，则将具有更多的样式灵活性。

— 尖尖的
source

3

请记住，禁用某些浏览器可能会使文本几乎不可读。您最好使用readonly属性，例如<input type =“ text” value =“ foo” readonly>

— Olly Hodgson 2010年

7

您也可以通过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" />

展开摘要

— 加尼·波兹（Chani Poz）
source

1

@Chani Poz您正在对jquery对象调用本机js setter，它将导致错误。$（'＃foo'）[0] .disabled = true或$（'＃foo'）。get（0）.disabled = true将完成工作

— Arek Kostrzeba

6

根据需要（例如document.getElementById('mytextbox')）获取对输入框的引用，并将其readonly属性设置为true：

myInputBox.readonly = true;

或者，您可以简单地内联添加此属性（无需JavaScript）：

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

— 罗廷·马思
source

如果您正在编写HTML（与XHTML相对），将是<input type =“ text” value =“ from db” readonly>

— Olly Hodgson，2010年