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

【问题标题】：How to disable an input type=text?如何禁用输入类型=文本？
【发布时间】：2011-02-21 21:55:17
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

或

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

请注意，readOnly 应采用驼峰式格式才能在 Firefox（魔术）中正常工作。

演示：https://jsfiddle.net/L96svw3c/ -- 在某种程度上解释了disabled 和readOnly 之间的区别。

【讨论】：

这对我有用。 jquery 版本是 $('input').prop('disabled', true)
我晚了七年——但是这两者在 2017 年有语义上的区别吗？
你一点也不迟，魔法还在（：我不记得我当时在什么平台上测试过，但是今天readonly（小写）仍然无法工作Ubuntu 上的 Firefox 52 -- 应该是驼峰式的。
为什么这对我不起作用？我用id="gate" 制作了一个input 元素，然后尝试了您的代码，这似乎对我不起作用...
WHATWG 指定属性为readOnly； Chrome 和 Firefox 都只支持readOnly。有没有浏览器中的属性名称不在 camelCase 中？

【解决方案2】：

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

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

【讨论】：

我不知道为什么这会获得选票，它没有回答问题。我们期待 javascript 的答案。
@Sophie 这是提问者根据他们的情况做的最正确的方法，也许是为了改变标题。
禁用模式会阻止输入框上的点击事件，只读不会。仅供参考。
要让“只读”输入字段看起来像“禁用”字段，设置 'style="color: gray; background-color: #F0F0F0;"'。（这是对this answer 的评论）
请记住，浏览器可以随意忽略“禁用”或“只读”属性，并且不应依赖此方法来可靠地防止数据被更新...如果服务器-处理表单的侧面代码仍将接受来自该字段的值并对其进行更新，任何有足够头脑来创建自己的表单的人都可以绕过这种“禁用”……这仅是为了在受信任的环境中方便用户界面。防止它的真正方法是使用服务器端逻辑。

【解决方案3】：

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

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

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

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

我建议不将值显示为<input> 的原因是，根据我的经验，它会导致布局问题。如果文本很长，那么在<input> 中，用户将需要尝试滚动文本，这不是普通人会猜到的。如果您只是将其放入 <span> 或其他名称中，您将拥有更多的样式灵活性。

【讨论】：

请记住禁用会使文本在某些浏览器上几乎无法阅读。使用 readonly 属性可能会更好，例如

【解决方案4】：

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

myInputBox.readonly = true;

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

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

【讨论】：

如果您正在编写 HTML（而不是 XHTML），那就是

【解决方案5】：

你也可以通过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 您正在对 jquery 对象调用本机 js setter，这将导致错误。 $('#foo')[0].disabled = true 或 $('#foo').get(0).disabled = true 将完成工作

【解决方案6】：

您可以获取 DOM 元素并将 disabled 属性设置为 true/false。

如果你使用vue framework，这里有一个非常简单的演示。

  let vm = new Vue({
        el: "#app",
        data() {
            return { flag: true }
        },
        computed: {
            btnText() {
                return this.flag ? "Enable" : "Disable";
            }
        }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <input type="text" value="something" :disabled="flag" />
    <input type="button" :value="btnText" @click="flag=!flag">
</div>

【讨论】：

【解决方案7】：

// CSS Markup
        .disabled-input {
                     pointer-events: none;
                    }
// HTML
    <input class="disabled-input" />

如果您正在寻找一种纯粹的 CSS 方法，您可以通过为类提供以下属性来禁用它。

【讨论】：