HTML文本输入只允许数字输入

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


JavaScript (最可靠的)

虽然这很简单,但它不会让您使用组合键和其他不可键入的键。 对于支持类型号和最大长度验证输入的完整JavaScript解决方案,请考虑使用此Polyfill。

带有<!DOCTYPE html> HTML 5具有原生解决方案:

<input type="number">

请注意,它在某些浏览器中的行为不是标准方式。

尝试使用输入类型=数字来查看HTML5版本。

另请参阅https://github.com/jonstipe/number-polyfill以获得旧版浏览器中的透明支持。

jQuery的

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl/cmd+A
            (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: Ctrl/cmd+C
            (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: Ctrl/cmd+X
            (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

更复杂的验证选项

如果你想做一些其他验证点和片断,这可能会很方便:

http://www.javascript-coder.com/html-form/javascript-form-validation.phtml https://github.com/lockevn/html-numeric-input

但不要忘记,你仍然必须做服务器端验证!

对于AZERTY键盘:

jQuery的

// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: Ctrl+C
    (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: Ctrl+X
    (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39) ||
    //Allow numbers and numbers + shift key
    ((e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) || (e.keyCode >= 96 && e.keyCode <= 105))) {
    // let it happen, don't do anything
    return;
}
// Ensure that it is a number and stop the keypress
if ((!e.shiftKey && (e.keyCode < 48 || e.keyCode > 57)) || (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
}

使用这个DOM

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

和这个脚本

function validate(evt) {
  var theEvent = evt || window.event;
  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();
  }
}

我已经搜寻了很长时间,很难找到一个很好的答案,我们迫切需要<input type="number" ,但是不足之处在于,这两个是我能想到的最简洁的方法:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^d]/,'')">

如果您不喜欢在被删除之前显示一秒钟的未接受字符,下面的方法是我的解决方案。 请注意许多附加条件,这是为了避免禁用各种导航和热键。 如果有人知道如何实现这一点,请告诉我们!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">
链接地址: http://www.djcxy.com/p/15355.html

上一篇: HTML text input allows only numeric input

下一篇: Remove margins in HTML5