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

Question

我试过：

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

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

});

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

Answer 1

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

Answer 2

如果您不希望该字段看起来“已禁用”或不正常，请使用以下命令：

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会使输入忽略用户对其的按键，从而防止它们更改或影响值。

Answer 6

对于仅使用 css 的解决方案，请尝试在输入上设置pointer-events: none 。

Answer 7

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

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 元素进行操作，请将 readonly 添加到类：

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

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

Answer 13

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