如何防止用户input文本字段而不禁用字段？

我试过了：

$('input').keyup(function() { $(this).attr('val', ''); });

但是在input一个字母之后它会略微移除input的文本。无论如何阻止用户完全input文本而不诉诸禁用文本字段？

可以很容易忽略的非Javascript替代方法：您可以使用readonly属性而不是disabled属性吗？它可以防止编辑input中的文本，但是浏览器对input进行不同的样式（不太可能使其“灰显”），例如<input readonly type="text" ...>

如果您不希望该字段显示为“禁用”或不正确，请使用以下命令：

 onkeydown="return false;"

这与Greengit和Derek说的基本一样，但是稍微短一些

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

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

标记

 <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();}

只是使用onkeydown =“return false”来控制标签，如下所示，它不会接受来自用户的值。

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

如果文本在键入之前显示，那么它可能在keydown事件中触发。你试过那个吗？

另一种方法可以根据需要使用$('input').onfocus(function(){this.blur()}); 我想这是你如何写它。我不熟练jQuery。

我喜欢添加一个也适用于dynamicjavascript DOM创build像D3一样，它不可能添加：

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

阻止对HTMLinputDOM元素的操作添加只读到类：

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

或在D3中：

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

并添加到CSS或更less：

 .readonly { pointer-events: none; }

这个解决scheme的好处在于，你可以dynamic地打开它，并在一个函数中，因此它可以在创build时集成到D3中（不可能用单个“只读”属性）。

从类中删除元素：

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

或者使用jquery：

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

或切换类：

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

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

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

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

另一个优点是它也处理通过上下文菜单粘贴文本来改变input值的情况。

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

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

 <input type="text" />