Question

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

Answer 1

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

修改

或

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

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

Answer 2

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

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

Answer 3

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

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

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

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

我建议不将值显示为<input>的原因是，根据我的经验，它会导致布局问题。如果文本很长，那么在<input>中，用户将需要尝试滚动文本，这不是普通人想要做的事情。如果您只是将其放入<span>或其他内容，则可以获得更多样式灵活性。

Answer 4

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

myInputBox.readonly = true;

或者您只需添加内联属性（无需JavaScript）：

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

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" />

Answer 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>

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

6 个答案: