Подтвердить входное значение до того, как оно будет показано пользователю

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

Но в этом случае, значение показывается пользователю, а затем корректируется на нужное значение.
Это способ присвоить значение до того, как оно будет показано пользователю?

я могу использовать pattern атрибут из 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

Вы можете использовать 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 во время набора текста. Если вы предпочитаете проверять все значение поля ввода вместо этого, я бы предложил проверить значение на другом событии, например Input 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