我只想在 html 輸入字段中允許使用數字和正斜杠

Question

我只想在我的輸入字段中使用模式屬性允許數字和正斜杠字符

Answer 1

1. 你可以使用這個網站來獲取keyCode： http : //keycode.info/
2. 0-9 keyCodes 是'48'-'57'。 正斜杠的 keyCode 是 191。

 function validateNumberAndForwardSlash(event) { var key = window.event ? event.keyCode : event.which; if (event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 191) { return true; } else { return false; } };

 <input type="text" onkeypress="return validateNumberAndForwardSlash(event);">

PS 這是一篇keyCode總結文章： https : //www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Answer 2

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode !== 47) 
    {
        return false;
    }
    return true;
}

Answer 3

您不應該監聽鍵盤事件（ keydown / keypress / keyup ）來過濾掉某些字符，因為輸入的值也可以通過將文本粘貼或拖放到其中來更新，並且有許多您不應該阻止的異常，例如箭頭、刪除、轉義、諸如全選、復制、粘貼之類的快捷方式……因此嘗試列出應允許的所有內容的詳盡列表可能不是一個好主意。

相反，只需偵聽input事件並更新輸入值，刪除所有無效字符，同時保留光標的位置：

 const input = document.getElementById('input'); input.oninput = (e) => { const cursorPosition = input.selectionStart - 1; const hasInvalidCharacters = input.value.match(/[^0-9/]/); if (!hasInvalidCharacters) return; // Replace all non-digits: input.value = input.value.replace(/[^0-9/]/g, ''); // Keep cursor position: input.setSelectionRange(cursorPosition, cursorPosition); };

 <input id="input" type="text" placeholder="Digits and forward slash only" />

在這里，您可以看到一個類似的答案和示例，用於稍微復雜的行為，僅允許帶有一個小數分隔符的數字： https : //stackoverflow.com/a/64084513/3723993

Answer 4

如果現在有人正在尋找答案（就像我一樣），那么最簡單和明顯的答案就是（至少從今天的角度來看）不見了。 此外，我認為這也是實際要求的那個。 即，使用 HTML 輸入字段的 pattern 屬性。

要按要求僅允許數字和斜杠，可以使用具有以下模式的輸入字段：

<input type="text" pattern="[0-9/]*" title="Please enter only numbers or slashes!">

如果用戶的輸入與模式不匹配，標題會在許多瀏覽器中顯示，作為對用戶的提示。 如果需要輸入至少一個字符，可以使用模式"[0-9/]+"代替（輸入字段應設置為必填）。