Javascript - 僅允許輸入字段和字符計數器中的數字

Question

我有一個輸入字段。 我想要它，以便只能在輸入字段中使用數字 。

在輸入字段下方，我還想要一個計數器，顯示當前輸入字段內的字符數。

HTML：

<input type="text" id="test" onkeypress="return isNumber(event)" />
<p id='demo'></p>

使用Javascript：

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    let inputValue = document.getElementById('test').value;
    let inputLength = inputValue.length;
    document.getElementById("demo").innerHTML = inputLength;
    return true;
    }

jsfiddle： http ： //jsfiddle.net/s831nwej/

它幾乎可以工作。 問題是輸入框下面的字符計數器總是比輸入字段中的字符總數少1個字符。 我認為有一些關於我失蹤的keypress事件的誇克。

Answer 1

計算keyup事件或html5 input事件處理程序中的計數。

HTML：

 <input type="text" id="test" 
     oninput="calculate(this)"
     onkeypress="return isNumber(event)"/>

<p id='demo'></p>

JavaScript：

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

// function for calculating the length where element
// reference passed as an argument
function calculate(ele) {
  let inputLength = ele.value.length;
  document.getElementById("demo").innerHTML = inputLength;
}

 function isNumber(evt) { evt = (evt) ? evt : window.event; var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; } function calculate(ele) { let inputLength = ele.value.length; document.getElementById("demo").innerHTML = inputLength; } 

 <input type="text" id="test" oninput="calculate(this)" onkeypress="return isNumber(event)" /> <p id='demo'></p> 

 function isNumber(evt) { evt = (evt) ? evt : window.event; var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; } function calculate(ele) { let inputLength = ele.value.length; document.getElementById("demo").innerHTML = inputLength; } 

 <input type="text" id="test" onkeyup="calculate(this)" onkeypress="return isNumber(event)" /> <p id='demo'></p> 

---

在html5中使用數字輸入類型有一種更好的方法，它只接受數字輸入 。

HTML：

 <input type="number" id="test" 
      oninput="calculate(this)"/>

<p id='demo'></p>

JavaScript：

// function for calculating the length where element
// reference passed as an argument
function calculate(ele) {
  let inputLength = ele.value.length;
  document.getElementById("demo").innerHTML = inputLength;
}

 function calculate(ele) { let inputLength = ele.value.length; document.getElementById("demo").innerHTML = inputLength; } 

 <input type="number" id="test" oninput="calculate(this)" /> <p id='demo'></p> 

Answer 2

我想回答為什么你的按鍵會產生這種意想不到的行為。 首先，它與javascript無關，它是您的操作系統的功能，它解釋您的擊鍵並在屏幕上顯示它們。 所以，你無法用javascript做任何事情。 那么，它是如何工作的？ 當你按一個鍵

WM_KEYDOWN和WM_SYSKEYDOWN

發送消息（條件：密鑰未保持）和

鍵狀態標志設置為零。

但如果條件是你按住鍵，標志：

鍵狀態標志設置為1。

所以從那里直到

WM_KEYUP或WM_SYSKEYUP

如果未設置消息或將鍵狀態標志設置為1，則數據不會存儲在輸入框值中。 但是，它會在輸入框中顯示它們。 這就是你的按鍵不計算當前輸入值的原因。 如果你願意的話

keyup event

那么它也可以計算當前的輸入值，因為你的操作系統已經完成了它

WM_KEYUP

工作。 有關鍵盤工作原理的更多詳細信息，請參閱此鏈接： 關於鍵盤

對於您的下一個問題“數字輸入”，您可以使用正則表達式檢查並執行以下操作：

var regEx = /^\d+$/;
//then do some check.
if(!regEx.test(document.getElementById("test"))) return false;

或者你可以在你的html輸入標簽內

<input type="number" .. >
<!-- else you may -->
<input type="text" ... pattern = "\d">;

Notic：您還需要檢查空值。

Answer 3

首先，如果您希望輸入只是數字，請使用type =“number”而不是類型“text”，並且計數總是小於1，因為檢查值的事件處理應該是onKeyUp而不是onKeyPress

檢查這個片段

 function isNumber(evt) { evt = (evt) ? evt : window.event; var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } let inputValue = document.getElementById('test').value; let inputLength = inputValue.length; document.getElementById("demo").innerHTML = inputLength; return true; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" id="test" onkeyup="return isNumber(event)" /> <p id='demo'></p>