如何禁用文本输入框？

Question

我想使用JavaScript禁止输入类型为text的输入框中的写入，如果可能的话。这个输入框是从数据库中填充的，所以我不希望用户修改它的值。

- kawtousse

Answer 1

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

或者

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

注意，readOnly 在 Firefox 中需要使用驼峰式命名才能正常工作（神奇的事情）。

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

- hudolejev

---

这对我有用。JQuery 版本是 $('input').prop('disabled', true)。 - Sunwoo Yang

我在这方面晚了七年，但是2017年这两者之间是否有语义差异呢？ - Jules

你并不晚，魔法仍在 (: 我不记得当时我测试过哪些平台，但今天在Ubuntu上Firefox 52中readonly（小写）仍然无法工作 - 应该是驼峰式大小写。 - hudolejev

WHATWG规范将该属性指定为readOnly；Chrome和Firefox仅支持readOnly。是否曾经有过属性名称不是驼峰式命名的浏览器？ - Sebastian Simon

@Voldemort'sWrath 如果你的评论仍然相关：你的<script>是否在HTML之上，没有defer属性和没有DOMContentLoaded或load监听器？请参阅为什么jQuery或诸如getElementById之类的DOM方法找不到元素？。这与readOnly或disabled无关。 - Sebastian Simon

Answer 2

如果您知道页面呈现时的值（因为数据库中有值），最好在呈现时禁用它，而不是使用JavaScript。为此，只需向 <input> 添加readonly属性（如果您还希望从表单提交中删除它，则添加disabled属性），例如这样：

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

- Nick Craver

---

我不知道为什么这个回答会得到投票，因为它没有回答问题。我们希望看到 JavaScript 的答案。 - Sophie

“@Sophie，基于提问者的情况，这是最正确的做法，也许需要更改标题。” - Nick Craver

禁用模式会阻止输入框上的点击事件，只读模式则不会。供您参考。 - knutole

要使“只读”输入字段看起来像“禁用”字段，请设置'style="color: grey; background-color: #F0F0F0;"'。（这是对此答案的评论） - Jake Toronto

请记住，浏览器可以自由地忽略“disabled”或“readonly”属性，因此不应依赖于此方法可靠地防止数据被更新...如果服务器端代码处理表单仍然接受该字段的值并更新它，则任何具有足够技能创建自己的表单的人都可以绕过此“禁用”...这仅适用于在受信任的环境中提供用户界面方便。真正防止它的方法是使用服务器端逻辑。 - Aaron Wallentine

Answer 3

如果数据来源于数据库，你可能考虑不要使用<input>标签来展示它。但是，你可以在标签中直接禁用它：

如果数据来源于数据库，您可能会考虑不要使用<input>标记来显示它。尽管如此，您仍可以在标记中直接禁用它：

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

如果您需要以后使用Javascript禁用它，可以设置"disabled"属性：

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

我建议不要将值显示为 <input> 的原因是，根据我的经验，它会导致布局问题。如果文本很长，则在 <input> 中，用户需要尝试滚动文本，这不是普通人会想到的事情。如果你只是把它放在一个 <span> 中，你就有了更多的样式灵活性。

- Pointy

---

请注意，对于某些浏览器而言，禁用功能可能会使文本几乎无法阅读。您可能更适合使用readonly属性，例如<input type="text" value="foo" readonly>。 - Olly Hodgson

Answer 4

以任何你喜欢的方式获取输入框的引用（例如document.getElementById('mytextbox')），并将其readonly属性设置为true：

myInputBox.readonly = true;

或者您可以直接内联添加此属性（无需JavaScript）：

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

- Roatin Marth

---

如果你正在编写HTML（而不是XHTML），那么代码应该是<input type="text" value="from db" readonly>。 - Olly Hodgson

Answer 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

---

@Chani Poz，你正在调用 jQuery 对象上的本地 js setter，这将导致错误。$('#foo')[0].disabled = true 或 $('#foo').get(0).disabled = true 将起到作用。 - Arek Kostrzeba

Answer 6

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

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

  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>

- Q10Viking

Answer 7

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

如果您正在寻找纯CSS方法，您可以通过将以下属性赋予类来禁用它。

- Samira

Answer 8

disabled和readOnly在这种情况下非常有用。

尝试运行这段代码片段，看看disabled和readOnly之间的区别。

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


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

<input type="text" value="Hello 1">
<br>
<input type="text" value="Hello 2" disabled>
<br>
<input type="text" value="Hello 3" id="hello3">

<br>
<br>

<input type="text" value="World 1!">
<br>
<input type="text" value="World 2!" readonly>
<br>
<input type="text" value="World 3!" id="world3">

- Sahil Thummar