如何防止用戶在不禁用該字段的情況下輸入文本字段？

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