之前驗證輸入值被示出爲用戶

Question

我有一個HTML <input>和一些圖案（例如-?\d*\.?\d*浮子符號值）。
我應該防止打字不匹配值。
我做到了在接下來的方式

jQuery.fn.numeric = function (pattern) 
{ 
    var jqElement = $(this), prevValue; 
    jqElement.keydown(function() 
    { 
          prevValue = jqElement.val(); 
    }) 
    jqElement.keyup(function(e) 
    { 
     if (!pattern.test(jqElement.val())) 
     { 
      jqElement.val(prevValue); 
      e.preventDefault(); 
     } 
     prevValue = "" 
    }) 
}; 

JSFiddle DEMO

但在這種情況下，值顯示到用戶，然後糾正，以正確的價值。
是它的方式來vaidate值之前，它顯示用戶？

我可以使用從html5

Answer 1

$("#validateMe").on('keydown', function() { 
    var charBeingTyped = String.fromCharCode(e.charCode || e.which); // get character being typed 
    var cursorPosition = $(this)[0].selectionStart;  // get cursor position 
    // insert char being typed in our copy of the value of the input at the position of the cursor. 
    var inValue = $(this).value().substring(0, cursorPosition) + charBeingTyped + $(this).value().substring(cursorPosition, $(this).value().length); 
    if(inValue.match(/-?\d*\.?\d*/)) return true; 
    else return false; 
}); 

Answer 2

pattern屬性你可以使用this code找出哪些字符被按下。驗證該字符，如果驗證，則將其附加到輸入字段。

Answer 3

試試這個代碼：

jQuery.fn.numeric = function (pattern) 
{ 
    $(this).keypress(function(e) 
    { 
     var sChar = String.fromCharCode(!e.charCode ? e.which : event.charCode); 
     e.preventDefault(); 
     var sPrev = $(this).val(); 
     if(!pattern.test(sChar)){ 
      return false; 
     } else { 
      sPrev = sPrev + sChar; 
     } 

     $(this).val(sPrev); 

    }); 

}; 

$("#validateId").numeric(/^-?\d*\.?\d*$/); 

jsfiddle.net/aBNtH/

UPDATE： 我的實例驗證，同時輸入每個charachter。如果您更願意檢查輸入字段的整個值，我會建議驗證另一個事件上的值，如輸入blur（）。

Answer 4

這個怎麼樣POJS，我使用的是一個跨瀏覽器addEvent功能，而不是jQuery和不使用任何regexs，但我相信它達到你在找什麼。按+或-更改值的符號。

HTML

<input id="test" type="text" /> 

的Javascript

/*jslint maxerr: 50, indent: 4, browser: true */ 


(function() { 
    "use strict"; 

    function addEvent(elem, event, fn) { 
     if (typeof elem === "string") { 
      elem = document.getElementById(elem); 
     } 

     function listenHandler(e) { 
      var ret = fn.apply(null, arguments); 

      if (ret === false) { 
       e.stopPropagation(); 
       e.preventDefault(); 
      } 

      return ret; 
     } 

     function attachHandler() { 
      window.event.target = window.event.srcElement; 

      var ret = fn.call(elem, window.event); 

      if (ret === false) { 
       window.event.returnValue = false; 
       window.event.cancelBubble = true; 
      } 

      return ret; 
     } 

     if (elem.addEventListener) { 
      elem.addEventListener(event, listenHandler, false); 
     } else { 
      elem.attachEvent("on" + event, attachHandler); 
     } 
    } 

    function verify(e) { 
     var target = e.target, // shouldn't be needed: || e.srcElement; 
      value = target.value, 
      char = String.fromCharCode(e.keyCode || e.charCode); 

     if (value.charAt(0) === "-") { 
      if (char === "+") { 
       e.target.value = value.slice(1); 
      } 
     } else if (char === "-") { 
      e.target.value = char + value; 
      return false; 
     } 

     value += char; 
     return parseFloat(value) === +value; 
    } 

    addEvent("test", "keypress", verify); 
}()); 

在jsfiddle

我覺得我用正確的價值觀keyCode || charCode 但你可能想搜索和檢查。正確的參數的摘要可here