Javascript-仅允许输入字段中的数字&；字符计数器

我有一个输入字段。我想要它，以便在输入字段中只能使用数字

在输入字段下面，我还需要一个计数器，显示当前输入字段中的字符数

HTML:

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

函数isNumber（evt）{
evt=（evt）？evt:window.event；
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
返回false；
}
让inputValue=document.getElementById（'test'）.value；
让inputLength=inputValue.length；
document.getElementById（“demo”）.innerHTML=inputLength；
返回true；
}

jsfiddle：

---

它几乎起作用了。问题是，输入框下方的字符计数器总是比输入字段中的字符总数少1个字符。我认为我缺少的

keypress

事件中有一些夸克。

计算事件或html5事件处理程序中的计数

HTML:

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

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

// 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;
}

JavaScript:

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

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

// 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;
}

//用于防止某些字符的函数
函数isNumber（evt）{
evt=（evt）？evt:window.event；
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
返回false；
}
返回true；
}
//用于计算元素所在位置的长度的函数
//作为参数传递的引用
函数计算（ele）{
让inputLength=ele.value.length；
document.getElementById（“demo”）.innerHTML=inputLength；
}

函数isNumber（evt）{
evt=（evt）？evt:window.event；
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
返回false；
}
返回true；
}
函数计算（ele）{
让inputLength=ele.value.length；
document.getElementById（“demo”）.innerHTML=inputLength；
}

首先，如果您希望输入仅为数字，请使用type=“number”而不是type“text”，并且计数始终小于1，因为检查值的事件处理应该是onKeyUp而不是onKeyPress

检查此代码段

函数isNumber（evt）{
evt=（evt）？evt:window.event；
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
返回false；
}
让inputValue=document.getElementById（'test'）.value；
让inputLength=inputValue.length；
document.getElementById（“demo”）.innerHTML=inputLength；
返回true；
}

我想回答为什么您的按键会产生这种意外行为。首先，它与javascript无关，它是操作系统的一个特性，解释击键并将其显示在屏幕上。因此，您无法使用javascript。那么，它是如何工作的呢？ 当你按键时

WM_KEYDOWN和WM_SYSKEYDOWN

发送消息（条件：钥匙未保持）并

密钥状态标志设置为零

但如果条件是您按住该键，则标志：

密钥状态标志设置为1

所以从那里到

WM\U KEYUP或WM\U SYSKEYUP

未设置消息或键状态标志设置为1。数据未存储在输入框值中。但是，它会在输入框中显示它们。这就是为什么按键不计算当前输入值的原因。如果你愿意

keyup event

然后，它将能够计算当前的输入值，因为您的操作系统已经完成了它的任务

WM_键合

工作。有关键盘工作原理的更多详细信息，请参阅以下链接：

对于下一个问题“数字输入”，您可以使用正则表达式检查并执行以下操作：

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

;

---

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

复制任何文本并用鼠标右键粘贴。不工作我认为按按键是个坏主意。oninput或onchange是更好的选择您可以将非数字复制并粘贴到fields@JapanGuy
onchange
在您离开该字段之前不会触发。