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中使用数字输入类型有更好的方法，它只接受number input。

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

的工作。有关键盘工作原理的详细信息，请参阅此链接： About Keyboard

并为您的下一个问题＆＃34;数字输入＆＃34;您可以使用正则表达式检查并执行以下操作：

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>

Javascript - 仅允许输入字段和数字中的数字一个字符计数器

3 个答案: