如何防止用户在不禁用该字段的情况下输入文本字段？

Question

我试过了：

$('input').keyup(function() {

   $(this).attr('val', '');

});

但它会在输入字母后稍微删除输入的文本。有没有办法阻止用户在不禁用文本字段的情况下完全输入文本？

Answer 1

一个很容易被忽视的非Javascript替代方案：你能用readonly属性代替disabled属性吗？它可以防止编辑输入中的文本，但浏览器对输入的样式不同（不太可能“将其变灰”） 例如<input readonly type="text" ...>

Answer 2

如果您不希望该字段看起来“禁用”或smth，只需使用此：

onkeydown="return false;"

和greengit和Derek说的基本一样，只是短了一点

Answer 3

$('input').keydown(function(e) {
   e.preventDefault();
   return false;
});

Answer 4

$('input').keypress(function(e) {
    e.preventDefault();
});

Answer 5

如果您想阻止用户添加任何内容，但要为他们提供擦除字符的能力：

<input value="CAN'T ADD TO THIS" maxlength="0" />

将输入的maxlength 属性设置为"0" 使得用户无法添加内容，但仍可以随意删除内容。

---

但如果你想让它真正恒定不变：

<input value="THIS IS READONLY" onkeydown="return false" />

将onkeydown 属性设置为return false 会使输入忽略用户在其上的keypresses，从而防止他们更改或影响值。

Answer 6

根据需要可以使用的另一种方法$('input').onfocus(function(){this.blur()}); 我认为这就是您编写它的方式。我不精通jquery。

Answer 7

对于纯 CSS 解决方案，请尝试在输入上设置 pointer-events: none。

Answer 8

标记

<asp:TextBox ID="txtDateOfBirth" runat="server" onkeydown="javascript:preventInput(event);" onpaste="return false;"
                                TabIndex="1">

脚本

function preventInput(evnt) {
//Checked In IE9,Chrome,FireFox
if (evnt.which != 9) evnt.preventDefault();}

Answer 9

我喜欢添加一个也适用于动态 javascript DOM 创建（如 D3）的无法添加的：

//.attr(function(){if(condition){"readonly"]else{""}) //INCORRECT CODE !

为了防止对 HTML 输入 DOM 元素的操作，将只读添加到类：

var d = document.getElementById("div1");
d.className += " readonly";

或在 D3 中：

 .classed("readonly", function(){
   if(condition){return true}else{return false}
 })

添加到 CSS 或更少：

.readonly {
  pointer-events: none;
}

这个解决方案的好处是您可以在一个函数中动态地打开和关闭它，这样它就可以在创建时集成到例如 D3 中（使用单个“只读”属性是不可能的）。

从类中删除元素：

document.getElementById("MyID").className =
  document.getElementById("MyID").className.replace(/\breadonly\b/,'');

或使用 Jquery：

$( "div" ).removeClass( "readonly" )

或切换类：

$( "div" ).toggleClass( "readonly", addOrRemove );

只是为了完整，祝你好运=^）

Answer 10

只需对控件标签使用 onkeydown="return false" 如下所示，它不会接受来自用户的值。

    <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True"
ontextchanged="txtDate_TextChanged" onkeydown="return false" >
    </asp:TextBox>

Answer 11

一种选择是将处理程序绑定到input 事件。

这种方法的优点是我们不会阻止用户期望的键盘行为（例如标签、向上/向下翻页等）。

另一个优点是它还可以处理通过上下文菜单粘贴文本来更改输入值的情况。

如果您只关心保持输入为空，则此方法效果最佳。如果你想维护一个特定的值，你必须在其他地方（在数据属性中？）跟踪它，因为当收到input 事件时它不可用。

const inputEl = document.querySelector('input');

inputEl.addEventListener('input', (event) => {
  event.target.value = '';
});

<input type="text" />

在 Safari 10、Firefox 49、Chrome 54、IE 11 中测试。

Answer 12

最好的解决方案是在用户点击输入后取消焦点，使其成为只读

  onFocus={e => e.target.blur()}