regexp와 일치하지 않는 입력 입력을 방지하기위한 jQuery 플러그인

Question

jQuery에는 Regexp 패턴과 일치하지 않는 텍스트 상자에 입력을 입력하는 것을 방지하는 플러그인이 있습니까? 예를 들어, 결제 금액을 입력하기위한 텍스트 상자가 있고 사용자가 숫자 만 입력 할 수 있기를 원합니다. 텍스트 상자에서 다른 모든 입력은 텍스트 상자에 영향을 미치지 않습니다.

감사해요

Answer 1

jQuery-Keyfilter 플러그인 - 필요한 것을합니다.

Answer 2

마스크 입력 플러그인

jQuery(function($){   
    $("#paymentAmount").mask("9999.99");
});

Answer 3

키보드 이벤트는 jQuery 문서에서 제안한 것처럼 약간 까다 롭습니다.
http://unixpapa.com/js/key.html
http://yehudakatz.com/2007/07/03/event-normalization-in-jquery-113/

당신과 관련된 어려움은 다음과 같습니다.

키 식별
키보드 이벤트를 잡으면 어떤 키를 누르는 지 알고 싶을 수도 있습니다. 그렇다면 너무 많이 요구할 수 있습니다. 이것은 브라우저 비 호환성과 버그의 매우 큰 혼란입니다.
위의 첫 번째 링크에서

모두 jQuery에서는 이것을 할 것입니다.

textBoxElement.keydown( function( e ) {
    var chr = String.fromCharCode( e.which );
    if( !/[0-9.]/.test( chr ) ) {
        e.preventDefault();
    }
}

또한 Enter, Tab, Delete와 같은 다른 중요한 키가 비활성화되므로 조건부에 추가해야합니다. 다른 모든 키를 인쇄 할 수있는 것은 아니므로 재 촬영할 수 없으므로 E.keycode를 확인해야합니다. 13, 8 등

REGEX에 대해 너무 귀찮게하지 않으면 같은 일을 할 수 있습니다.

textBoxElement.keydown( function( e ) {
    switch( e.keyCode ) {
        case 48: //0
        case 49: //1
        case 50: //2
        case 51: //3
        case 52: //4
        case 53: //5
        case 54: //6
        case 55: //7
        case 56: //8
        case 57: //9
        case 48: //10
        case 37: //left
        case 39: //right
        case 8:  //tab
        case 13: //return
        case 46: //del
        case 190: //.
            return;
    }
    e.preventDefault();
});

Answer 4

그러한 플러그인이 쉽게 사용할 수 있다고 생각하지 않습니다. REGEX를 적용하기 전에 사용자가 입력을 입력 할 수 있도록해야하기 때문에 문제는 약간 까다로워집니다. 즉, REGEX가 단순히 일련의 문자를 정의하지 않는 한 각 Char와 일치 할 수는 없습니다.

예를 들어, 지불 금액을 입력하고 단일 문자로 숫자와 소수점을 허용하려면 99.99.23.42492?

반면에, 당신이 /\d+\.\d{2}/, 그런 다음 단일 캐릭터와 전혀 일치하지 않으므로 Regex를 적용하고 일치하지 않으면 입력을 삭제하기 전에 몇 가지 문자를 입력 할 수 있어야합니다. 그것은 실망 스러울 수 있습니다.

입력을 입력 할 때 입력을 필터링하려면 첫 번째 문자에 대한 숫자를 허용 한 다음 소수점이 입력 될 때까지 후속 문자의 숫자 또는 소수점을 두 자리 더 한 다음 더 이상 입력하지 않습니다. 일반적인 목적 필터가 아닙니다.

예를 들어, 다음은 그렇게 할 코드가 있지만 매우 추악합니다.

   myInput.keydown(function() {
       var text = this.val
       if(!/^\d/.test(text)) {
          return '';
       } else {
          done = text.match(/^(\d+\.\d\d)/);
          if (done) { return done[0]; }

          last_char = text.substr(text.length-1,1);
          decimal_count = text.replace(/[^\.]/g,'').length;

          if (decimal_count < 1) {
             if (!/[\d\.]/.test(last_char)) {
                return text.substr(0,text.length-1);
             }
          } else if (decimal_count == 1 && last_char == '.') {
             return text;
          } else {
             if (!/[\d]/.test(last_char)) {
                return text.substr(0,text.length-1);
             }
          }
          return text;
       }
    });

물론 "실제"타이핑을하지 않고 특정 값으로 붙여 넣기가 작동하지 않습니다.

어쩌면 다른 접근법이 당신에게 더 잘 작동할까요? 필드를 강조하고 사용자가 비수분, 비 설명을 입력하는 경우 또는 입력 자체를 필터링하는 대신 10 진수 이상을 입력하는 경우 사용자에게 지시하는 것과 같습니다.

Answer 5

다음은 내가 사용하는 간단한 jQuery 확장자입니다.

jQuery.fn.DecimalMask = function () {
  return this.each(function () {
    $(this).keypress(function (e) {
      var keynum;
      if (window.event) // IE
      {
        keynum = e.keyCode;
      }
      else if (e.which) // Netscape/Firefox/Opera
      {
        keynum = e.which;
      }
      if (typeof keynum == 'undefined') return true;
      else if (keynum == 46 && $(this).val().indexOf(".") > -1) return false; //already has a decimal point
      else return ((keynum > 47 && keynum < 58) || keynum == 13 || keynum == 8 || keynum == 9 || keynum == 46 || keynum == 45); //allow ony number keys or keypad number keys
    });
  });
};
//implementation
$("#mytxtbox").DecimalMask();