如何使用JavaScript阻止文本字段中的任何類型的輸入？

Question

是否可以使用JavaScript阻止在文本字段中進行任何輸入？ 特別包括：

• 在鍵盤上鍵入文本 （可以通過keydown事件捕獲）
• 使用上下文菜單粘貼文本 （可以通過paste事件捕獲）
• 使用上下文菜單剪切文本 （可以通過cut事件捕獲）
• 使用上下文菜單刪除文本
• 通過上下文菜單使用瀏覽器的內置拼寫檢查器替換文本
• 例如，在Chrome中使用上下文菜單插入表情符號

readonly屬性在語義上是可行的方法，但是如果將字段設置為required （或者使用額外的JS邏輯，則不能使用內置表單驗證）。

立即捕獲focus事件並觸發blur阻止選擇和復制文本。

將輸入的值存儲在focus ，並在每次change事件后對其進行設置，雖然可以完成一些工作，但是內容會閃爍片刻。

有任何想法嗎？

編輯：有些人問我為什么需要這樣做，而且這沒有任何意義。 首先，我知道可以通過瀏覽器開發人員工具設置該值，並且我也知道需要適當的后端驗證。 問題背后的想法如下：我有一個文件輸入字段。 為了正確設置其樣式，將隱藏實際的<input type="file"> ，並使用一個Bootstrap輸入組，並在其中使用一個文本字段和一個瀏覽按鈕（該按鈕是隱藏文件字段的標簽，因此單擊它實際上會打開選擇文件對話框，該對話框可在所有經過測試的瀏覽器中使用）。 用戶選擇文件后，文本字段將立即更新以顯示文件名。 顯示文件名的文本字段的HTML5屬性設置為required因此任何提交表單的瀏覽器都會檢查文本字段是否為空，如果為空，則顯示錯誤。 如果我將文本字段設置為readonly或disabled ，則瀏覽器在提交時不會驗證該字段。 我希望瀏覽器執行驗證而不是自定義JS代碼，以便按字段在頁面上出現的順序執行字段的驗證，以便所有提交前的錯誤都具有相同的外觀。

編輯2：另外，由於隱藏了實際的文件輸入字段，因此將其設置為required字段而不是顯示文件名的文本字段會導致Chrome出現以下錯誤：“名稱為'myfancyname'的無效表單控件不能聚焦。”

Answer 1

您可以在輸入元素的keydown事件中嘗試event.preventDefault （如果需要，還可以copy ， paste ， cut ）。 檢查此鏈接以獲取文檔https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault 。

我在這里有一個示例實現https://jsfiddle.net/ytx192ca/

我對用例感到好奇，因為如果您需要一個用戶不能更改任何內容的字段，那為什么不使用span ， p或除input元素以外的任何內容

Answer 2

似乎沒有完全解決方法如何處理原始問題。

在編輯中描述的特定情況下，我可以通過不使用display: none來解決此問題display: none對於輸入的文件， display: none ，但通過opacity: 0使其不可見。 通過此更改，可以使文件輸入元素本身具有我想要用於表單驗證的required屬性集。 現在，我想要偽造只讀的文本字段實際上可以變成只讀的，因為我不再需要它來進行表單驗證。

Answer 3

在您的js中執行以下操作：

 $('#test').attr('readonly', true);