文字輸入數值驗證

Question

我正在嘗試讓文本字段僅允許數字。 （即“ 0-9”而不是小數。）我遇到了這個流行的答案 ，它說：

 <input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input> 

我試過了，但是問題是，它允許您粘貼任何字符。如何禁止粘貼“非法”字符？ 另外，此代碼是否可以與其他鍵盤（例如德語鍵盤）一起使用？

請不要發布有關type="number" 。 由於許多原因，我沒有使用它。

Answer 1

您可以專門攔截粘貼事件並在那里處理您的案件。

Answer 2

攔截oninput事件並在那里處理粘貼的文本。 請注意，此事件也會在按鍵輸入上觸發。

<script>
function validate(element) {
  if (element.value.match('\\D')) {
    alert('Please enter only numeric values\n(You entered ' + element.value + ')');
    element.value = '';
  }
}
</script>

<input type="text" oninput="validate(this);">

Answer 3

HTML代碼：

<form name="myForm" action="" onsubmit="return checkInp()" method="post">
  First name: <input type="text" name="age">
 <input type="submit" value="Submit">

JavaScript代碼：

function checkInp()
   {
     var x=document.forms["myForm"]["age"].value;
       if (isNaN(x)) 
          {
            alert("Must input numbers");
            return false;
          }
   }

Answer 4

您可以僅使用按鍵事件，每次輸入新字符時都會檢查輸入。

 var txt = document.getElementById("phone"); txt.onkeypress = function(key) { if (key.charCode < 48 || key.charCode > 57) return false; } txt.addEventListener("paste", function(e) { e.preventDefault(); var pastedData = e.clipboardData.getData('Text'); if (!isNaN(pastedData)) { txt.value += pastedData; } }, true); 

 <fieldset> <label for="phone">Phone:</label> <input type="text" id="phone" /> </fieldset> 

Answer 5

對於用戶友好的界面，通常最好根據輸入的實際值進行驗證，因此請不要使用charCode，而應使用輸入的值。 為此，一個簡單的正則表達式適合：

if (/\D/.test(value)) {
  // a non–digit was entered
}

通常最好驗證用戶何時完成輸入，例如，對於銀行業務，我可以將信用卡余額復制並粘貼為“ 1,203.43”，然后刪除逗號。 然后，當我通過適當的屏幕消息將其保留（onblur或onsubmit）時，對該字段進行了驗證，如果發現錯誤，我將予以修復。

但是在某些情況下，它也適合使用keyup或其他合適的事件。

因此，對於僅應包含數字的輸入，您可以執行以下操作：

 function validate(el) { if (el.classList.contains('numsOnly')) { document.getElementById(el.id + 'Err').innerHTML = /\\D/.test(el.value)? "Must contain only digits" : ''; } } 

 .screenHint {font: sans-serif; font-size: 80%; color: #999999} 

 <label for="aNum">A number:<input name="aNum" id="aNum" class="numsOnly" onblur="validate(this)" onkeyup="validate(this)" onpaste="validate(this)" placeholder="1234"></label><span class="screenHint">Digits only</span><br> <span style="color:red; background-color: white;" id="aNumErr"></span> 

當然，您可能會動態添加偵聽器，並進行更多的驗證，但是上面顯示了一些原理。