如何禁用输入 type = text？

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

451582 次浏览
小开

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

myInputBox.readonly = true;

或者，您可以简单地在内联中添加这个属性(不需要 JavaScript) :

<input type="text" value="from db" readonly="readonly" />
小开
最佳答案

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

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

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

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

如果以后需要使用 Javascript 禁用它，可以设置“ disked”属性:

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

我之所以建议不要显示 <input>的价值，是因为根据我的经验，它会导致布局问题。如果文本很长，那么在 <input>中，用户需要尝试滚动文本，这不是一般人会猜想的事情。如果你只是把它放到 <span>或其他什么东西中，你就有了更多的样式灵活性。

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

或者

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

注意，readOnly应该在 camelCase 中，以便在 Firefox 中正确工作(魔术)。

演示: https://jsfiddle.net/L96svw3c/——在一定程度上解释了 disabled和 readOnly之间的区别。

小开

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

小开

您可以获取 DOM 元素并将 残疾人属性设置为 没错/假的。

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

  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>

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

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


提交答案