仅限终极数字文本字段

Question

有人知道如何将文本字段变成只允许用户输入数字的JavaScript吗？我知道这可以用Google搜索，但解决方案都是一样的：（http://www.htmlcodetutorial.com/forms/index_famsupp_158.html）。我想要的是过滤不仅来自键盘的任何输入，而且也来自鼠标，比如复制&在该字段上粘贴非数字值。任何帮助将不胜感激。

Answer 1

使用onChange：

<INPUT NAME="dollar" SIZE=5 MAXLENGTH=5 onChange="this.value = this.value.replace(/[^0-9]/g, '')"> 

注：在FF3至少它只能运行值已经经过“确认”，框失去焦点或其他而不是瞬间。

Answer 2

可以使用的间隔功能（setInterval）以周期性地验证字段输入。 This jsfiddle是一个简单的例子。

基本上它可以看起来像：

function chkNumeric(){ 
    if (!(/^[0-9]$/.test(document.getElementById([id of numeric input]).value)){ 
     // do things 
    } 
} 

setInterval(chkNumeric,250); 

Answer 3

这里是我的解决方案（这也验证了数据复制&粘贴）：

function InputValidator(input, validationType, validChars) { 
if (input === null || input.nodeType !== 1 || input.type !== 'text' && input.type !== 'number') 
    throw ('Please specify a valid input'); 

if (!(InputValidator.ValidationType.hasOwnProperty(validationType) || validationType)) 
    throw 'Please specify a valid Validation type'; 

input.InputValidator = this; 

input.InputValidator.ValidCodes = []; 

input.InputValidator.ValidCodes.Add = function (item) { 
    this[this.length] = item; 
}; 

input.InputValidator.ValidCodes.hasValue = function (value, target) { 
    var i; 
    for (i = 0; i < this.length; i++) { 
     if (typeof (target) === 'undefined') { 
      if (this[i] === value) 
       return true; 
     } 
     else { 
      if (this[i][target] === value) 
       return true; 
     } 
    } 

    return false; 
}; 

var commandKeys = { 
    'backspace': 8, 
    'tab': 9, 
    'enter': 13, 
    'shift': 16, 
    'ctrl': 17, 
    'alt': 18, 
    'pause/break': 19, 
    'caps lock': 20, 
    'escape': 27, 
    'page up': 33, 
    'page down': 34, 
    'end': 35, 
    'home': 36, 
    'left arrow': 37, 
    'up arrow': 38, 
    'right arrow': 39, 
    'down arrow': 40, 
    'insert': 45, 
    'delete': 46, 
    'left window key': 91, 
    'right window key': 92, 
    'select key': 93, 
    /*creates Confusion in IE */ 
    //'f1': 112, 
    //'f2': 113, 
    //'f3': 114, 
    //'f4': 115, 
    //'f5': 116, 
    //'f6': 117, 
    //'f7': 118, 
    //'f8': 119, 
    //'f9': 120, 
    //'f10': 121, 
    //'f11': 122, 
    //'f12': 123, 
    'num lock': 144, 
    'scroll lock': 145, 
}; 

commandKeys.hasValue = function (value) { 
    for (var a in this) { 
     if (this[a] === value) 
      return true; 
    } 

    return false; 
}; 

function getCharCodes(arrTarget, chars) { 
    for (var i = 0; i < chars.length; i++) { 
     arrTarget.Add(chars[i].charCodeAt(0)); 
    } 
} 

function triggerEvent(name, element) { 
    if (document.createEventObject) { 
     // dispatch for IE 
     var evt = document.createEventObject(); 
     return element.fireEvent('on' + name, evt) 
    } 
    else { 
     // dispatch for firefox + others 
     var evt = document.createEvent("HTMLEvents"); 
     evt.initEvent(name, true, true); // event type,bubbling,cancelable 
     return !element.dispatchEvent(evt); 
    } 
} 

if (validationType == InputValidator.ValidationType.Custom) { 
    if (typeof (validChars) === 'undefined') 
     throw 'Please add valid characters'; 

    getCharCodes(input.InputValidator.ValidCodes, validChars); 
} 
else if (validationType == InputValidator.ValidationType.Decimal) { 
    getCharCodes(input.InputValidator.ValidCodes, '.'); 
} 
else if (validationType == InputValidator.ValidationType.Numeric) { 
    getCharCodes(input.InputValidator.ValidCodes, ''); 
} 

input.InputValidator.ValidateChar = function (c) { 
    return this.ValidCodes.hasValue(c.charCodeAt(0)); 
} 

input.InputValidator.ValidateString = function (s) { 
    var arr = s.split(''); 

    for (var i = 0; i < arr.length; i++) { 
     if (!this.ValidateChar(arr[i])) { 
      arr[i] = ''; 
     } 
    } 

    return arr.join(''); 
} 

function bindEvent(el, eventName, eventHandler) { 
    if (el.addEventListener) { 
     el.addEventListener(eventName, eventHandler, false); 
    } else if (el.attachEvent) { 
     el.attachEvent('on' + eventName, eventHandler); 
    } 
} 

function getCaretPosition(i) { 
    if (!i) return; 

    if ('selectionStart' in i) { 
     return i.selectionStart; 
    } 
    else { 
     if (document.selection) { 
      var sel = document.selection.createRange(); 
      var selLen = document.selection.createRange().text.length; 
      sel.moveStart('character', -i.value.length); 
      return sel.text.length - selLen; 
     } 
    } 
} 

function setCursor(node, pos) { 
    var node = (typeof (node) === "string" || node instanceof String) ? document.getElementById(node) : node; 

    if (!node) { 
     return false; 
    } 
    else if (node.createTextRange) { 
     var textRange = node.createTextRange(); 
     textRange.collapse(true); 
     textRange.moveEnd(pos); 
     textRange.moveStart(pos); 
     textRange.select(); 
     return true; 
    } else if (node.setSelectionRange) { 
     node.setSelectionRange(pos, pos); 
     return true; 
    } 

    return false; 
} 

function validateActive() { 
    if (input.isActive) { 
     var pos = getCaretPosition(input); 

     var arr = input.value.split(''); 

     for (var i = 0; i < arr.length; i++) { 
      if (!this.ValidateChar(arr[i])) { 
       arr[i] = ''; 

       if (pos > i) 
        pos--; 
      } 
     } 
     console.log('before : ' + input.value); 

     input.value = arr.join(''); 
     console.log('after : ' + input.value, input); 
     setCursor(input, pos); 

     setTimeout(validateActive, 10); 
    } 
} 

bindEvent(input, 'keypress', function (e) { 
    var evt = e || window.event; 
    var charCode = evt.which || evt.keyCode; 

    if (!input.InputValidator.ValidCodes.hasValue(charCode) && !commandKeys.hasValue(charCode)) { 
     if (evt.preventDefault) { 
      evt.preventDefault(); 
      evt.stopPropagation(); 
     } 
     return false; 
    } 
}); 

bindEvent(input, 'keyup', function (e) { 
    var evt = e || window.event; 
    var charCode = evt.which || evt.keyCode; 

    if (!input.InputValidator.ValidCodes.hasValue(charCode) && !commandKeys.hasValue(charCode)) { 
     if (evt.preventDefault) { 
      evt.preventDefault(); 
      evt.stopPropagation(); 
     } 
     return false; 
    } 
}); 

bindEvent(input, 'change', function (e) { 
    var dt = input.value; 

    input.value = input.InputValidator.ValidateString(input.value); 

    if (input.value !== dt) 
     triggerEvent('change', input); 
}); 

bindEvent(input, 'blur', function (e) { 
    var dt = input.value; 
    input.value = input.InputValidator.ValidateString(input.value); 

    input.isActive = false; 

    if (input.value !== dt) 
     triggerEvent('blur', input); 
}); 

bindEvent(input, 'paste', function (e) { 
    var evt = e || window.event; 
    var svt = input.value; 

    if (evt && evt.clipboardData && evt.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event 
     if (/text\/html/.test(evt.clipboardData.types)) { 
      var dt = evt.clipboardData.getData('text/html'); 

      input.value = input.InputValidator.ValidateString(dt); 
      if (input.value !== dt) 
       triggerEvent('change', input); 
     } 
     else if (/text\/plain/.test(e.clipboardData.types)) { 
      var dt = evt.clipboardData.getData('text/plain'); 

      input.value = input.InputValidator.ValidateString(dt); 
      if (input.value !== dt) 
       triggerEvent('change', input); 
     } 
     else { 
      input.value = ''; 
     } 
     waitforpastedata(input, svt); 
     if (e.preventDefault) { 
      e.stopPropagation(); 
      e.preventDefault(); 
     } 
     return false; 
    } 
    else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup 
     input.value = ''; 
     waitforpastedata(input, svt); 
     return true; 
    } 
}); 

bindEvent(input, 'select', function (e) { 
    var evt = e || window.event; 

    if (evt.preventDefault) { 
     evt.preventDefault(); 
     evt.stopPropagation(); 
    } 
    return false; 
}); 

bindEvent(input, 'selectstart', function (e) { 
    var evt = e || window.event; 

    if (evt.preventDefault) { 
     evt.preventDefault(); 
     evt.stopPropagation(); 
    } 
    return false; 
}); 

/* no need to validate wile active, 
    removing F keys fixed IE compatability*/ 
//bindEvent(input, 'fucus', function (e) { 
// input.isActive = true; 
// validateActive(); 
//}); 

//validate current value of the textbox 
{ 
    var dt = input.value; 
    input.value = input.InputValidator.ValidateString(input.value); 

    //trigger event to indicate value has changed 
    if (input.value !== dt) 
     triggerEvent('change', input); 
} 

function waitforpastedata(elem, savedcontent) { 
    if (elem.value !== '') { 
     var dt = input.value; 
     elem.value = elem.InputValidator.ValidateString(elem.value); 

     if (input.value !== dt) 
      triggerEvent('change', input); 
    } 
    else { 
     var that = { 
      e: elem, 
      s: savedcontent 
     } 
     that.callself = function() { 
      waitforpastedata(that.e, that.s) 
     } 
     setTimeout(that.callself, 10); 
    } 
} 
} 

InputValidator.ValidationType = new (function (types) { 
    for (var i = 0; i < types.length; i++) { 
     this[types[i]] = types[i]; 
    } 
})(['Numeric', 'Custom', 'Decimal']); 

将其应用到输入，请执行以下操作：

new InputValidator(document.getElementById('txtValidate'), InputValidator.ValidationType.Decimal);/* Numeric or Custom */ 

如果自定义指定为验证键入您必须指定有效的字符。 如：从下面给出的所有答案

new InputValidator(document.getElementById('txtValidate'), InputValidator.ValidationType.Custom,'1234abc');