有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?


当前回答

HTML5有<input type=number>,这听起来很适合你。目前,只有Opera原生支持它,但有一个项目有一个JavaScript实现。

其他回答

使用这个DOM

<input type='text' onkeypress='validate(event)' />

这个脚本

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

这是一个改进的函数:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

下面的函数将检查每个输入字符是否为number。

numeric: value => {
    let numset = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);
    console.log(numset.has(value.substring(value.length - 1, value.length)));
}

如果你正在尝试有棱角的,这可能会有帮助

获取输入的数字(带小数点),然后

<input [(ngModel)]="data" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

现在这将不能正确地更新模型中的值 为了显式地改变model的值,添加这个

<input [(ngModel)]="data" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" (change)="data = $event.target.value">

更改事件将在模型中的值更新后触发,因此它也可以用于响应式表单。

现在大多数浏览器都支持type="number"这个属性

<input type="number" maxlength="3" ng-bind="first">