試圖防止無效的按鍵（不是數字）和多個小數點

Question

到目前為止，我使用它來調用函數：

 document.getElementById("dzCalculator").addEventListener("keydown", isNumberKey);
   function isNumberKey(txt, evt) {
      let charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode == 46) {
          evt.preventDefault();
        //Check if the text already contains the . character
        if (txt.value.indexOf('.') === -1) {
          return true;
        } else {
          return false;
        }
      } else {
        if (charCode > 31 &&
          (charCode < 48 || charCode > 57))
          return false;
      }
      return true;
    }

但不幸的是我得到了錯誤：Uncaught TypeError: evt is undefined

我仍然處於學習階段，所以我還沒有看到我錯過了什么。 非常感謝您的幫助。

Answer 1

addEventListener僅將觸發它的事件傳遞給傳遞的回調，因此在您的情況下， txt持有該事件，而evt未定義。

您可以使用evt.target.value提取輸入的txt值。

document.getElementById("dzCalculator").addEventListener("keydown", isNumberKey);
   function isNumberKey(evt) {
      let txt = evt.target.value;

      //...

至於你的其余邏輯，已經有一些很好的答案：

HTML 文本輸入僅允許數字輸入

---

由於您仍在尋找限制輸入的解決方案，因此我將提供此解決方案。 您可以在 keyup 之后驗證值，而不是控制允許的鍵。 使用input偵聽器，我們可以在不顯示無效字符的情況下觀察更改和驗證，同時還解決了維護預期功能和可訪問性的總體問題，而無需指定所有關鍵響應。

此代碼段使用input偵聽更改。 觸發時，它使用event.target.value提取當前值並存儲當前光標位置。 然后它使用解構[...value]將字符串重新轉換為數組。 然后使用filter()過濾該數組，使其僅包含出現在validKeys字符串中的字符。 然后使用reduce()其縮減回字符串，此時它會考慮重復的小數點。 如果得到的editedValue與初始value不同，則更新evt.target.value並將光標設置回原來的位置（減一，因為我們刪除了一個字符）；

 document.getElementById("dzCalculator").addEventListener("input", isNumberKey); function isNumberKey(evt) { const validKeys = '1234567890.'; const cursorLocation = evt.target.selectionStart; const value = evt.target.value; let editedValue = [...value] .filter(char => validKeys.includes(char)) .reduce((acc, char) => { return acc.includes('.') && char === '.' ? acc : acc + char}, ''); if (editedValue !== value) { evt.target.value = editedValue; evt.target.selectionStart = cursorLocation-1; evt.target.selectionEnd = cursorLocation-1; } }

 <input id="dzCalculator" value="" />

為了適應負值，您可以調整validKeys和reduce()回調，因此：

const validKeys = '-1234567890.';
  let editedValue = [...value]
    .filter(char => validKeys.includes(char))
    .reduce((acc, char, i) => { 
        if (acc.includes('.') && char === '.' || char === '-' && i !== 0) {
        return acc
      } else {
        return acc + char
      }
    }, '');

Answer 2

我已經編寫了非常簡單的邏輯，只允許數字輸入並限制輸入只有一個點。

 document.getElementById("dzCalculator").addEventListener("keydown", isNumberKey); function isNumberKey(evt) { let passCode = '0123456789.' if (passCode.indexOf(evt.key)===-1 && evt.key !=='Backspace' && evt.key !== 'Tab'&& evt.key !=='Delete'){ evt.preventDefault(); return false; }else{ //contains numbers && dots if (evt.target.value.indexOf('.') >= 0 && (evt.key === ".")) { //check for multiple dots evt.preventDefault(); return false; } else return true; } }

 <input id='dzCalculator' type='text'>