[jquery] jQuery : 텍스트 상자의 “숫자”전용 입력을 제한하는 가장 좋은 방법은 무엇입니까? (소수점 허용)

Program / 글쓴이

텍스트 상자의 “숫자”전용 입력을 제한하는 가장 좋은 방법은 무엇입니까?

소수점을 허용하는 것을 찾고 있습니다.

많은 예를 봅니다. 그러나 어느 것을 사용할 것인지 아직 결정하지 않았습니다.

Praveen Jeganathan에서 업데이트

더 이상 플러그인이 아니라 jQuery는 jQuery.isNumeric()v1.7에서 자체적으로 추가했습니다. 참조 : https://stackoverflow.com/a/20186188/66767

답변

최신 정보

이에 대한 새롭고 매우 간단한 해결책이 있습니다.

다양한 숫자 필터를 포함 하여 텍스트에 모든 종류의 입력 필터 를 사용할 수 있습니다 <input>. 이것은 복사 + 붙여 넣기, 드래그 + 드롭, 키보드 단축키, 상황에 맞는 메뉴 작업, 입력 할 수없는 키 및 모든 키보드 레이아웃을 올바르게 처리합니다.

참조 이 대답을 하거나 스스로를 시도 JSFiddle에 .

jquery.numeric 플러그인

jquery.numeric 플러그인 으로 많은 양식을 성공적으로 구현했습니다 .

$(document).ready(function(){
    $(".numeric").numeric();
});

또한 이것은 텍스트 영역에서도 작동합니다!

그러나 Ctrl + A, 상황에 맞는 메뉴를 통한 복사 + 붙여 넣기 및 드래그 + 드롭은 예상대로 작동 하지 않습니다 .

HTML 5

HTML 5 표준에 대한 광범위한 지원으로 요소의 pattern속성과 number유형을 사용 input하여 숫자 만 입력을 제한 할 수 있습니다. 일부 브라우저 (특히 Chrome)에서는 숫자가 아닌 내용의 붙여 넣기도 제한합니다. 더 자세한 정보 number및 기타 최신 입력 유형은 여기를 참조하십시오 .

답변

유효성 검사가 아닌 입력을 제한하려는 경우 주요 이벤트로 작업 할 수 있습니다. 이 같은:

<input type="text" class="numbersOnly" value="" />

과:

jQuery('.numbersOnly').keyup(function () {
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

이를 통해 사용자는 유효성 검사 단계에서 나중에 알파벳 문자 등을 입력 할 수 없음을 즉시 알 수 있습니다.

마우스로 잘라서 붙여 넣거나 키 이벤트를 트리거하지 않는 양식 자동 완성 기능을 사용하여 입력 내용을 채울 수 있기 때문에 여전히 유효성 검사를 원할 것입니다.

답변

가장 좋은 대답은 위의 방법이라고 생각했습니다.

jQuery('.numbersOnly').keyup(function () {
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

그러나 화살표 키와 삭제 버튼이 커서를 문자열의 끝 부분에 맞추는 것이 약간 고통 스럽다는 것에 동의합니다 (테스트 때문에 나에게 쫓겨났습니다)

나는 간단한 변화를 추가했다

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

이렇게하면 텍스트가 변경되지 않는 버튼 히트가있는 경우 무시하십시오. 이것으로 당신은 끝까지 점프하지 않고 화살표를 누르고 삭제할 수 있지만 숫자가 아닌 텍스트는 지 웁니다.

답변

jquery.numeric 플러그인에는 저자에게 알려주는 몇 가지 버그가 있습니다. Safari와 Opera에서 소수점을 여러 개 사용할 수 있으며 Opera에서 백 스페이스, 화살표 키 또는 기타 여러 제어 문자를 입력 할 수 없습니다. 양의 정수 입력이 필요했기 때문에 결국 내 자신을 작성했습니다.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

답변

더 이상 플러그인 이 아닌 jQuery 는 v1.7에 추가 된 자체 jQuery.isNumeric ()을 구현했습니다 .

jQuery.isNumeric( value )

인수가 숫자인지 확인합니다.

샘플 결과

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

다음은 isNumeric ()을 이벤트 리스너와 묶는 방법의 예입니다.

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

답변

위에서 언급 한 numeric () 플러그인은 Opera에서 작동하지 않습니다 (백 스페이스 키, 백 스페이스 키 또는 포워드 키를 사용할 수 없음).

JQuery 또는 Javascript에서 아래 코드는 완벽하게 작동합니다 (두 줄에 불과합니다).

jQuery :

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

자바 스크립트 :

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

물론 이것은 순수한 숫자 입력 (더하기 백 스페이스, 삭제, 앞으로 / 뒤로 키) 전용이지만 포인트와 빼기 문자를 포함하도록 쉽게 변경할 수 있습니다.

답변

number () 메소드 와 함께 유효성 검사 플러그인 을 사용할 수 있습니다 . 

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});