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事件的技术细节我还没有掌握。

- MonkeyOnARock

---

<input type="number" ... - adeneo

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>

- Pranav C Balan

---

根据按键来判断并不是一个好主意，我认为使用oninput或者onchange会更好。 - Nodir Rashidov

您可以将非数字复制粘贴到您的字段中。 - Nodir Rashidov

@JapanGuy 在你离开这个字段之前 onchange 不会被触发。 - user663031

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">;

注意：你还需要检查空值。

- sagar

Answer 3

首先，如果您希望输入仅为数字，请使用type="number"而不是type "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>

- Geeky

---

复制任何文本并通过右键粘贴无法工作。 - Nodir Rashidov