2012-03-08 3 views
1

입력란의 테이블이 있습니다. 경험이없는 사용자가이 양식을 사용하므로 최악의 상황에 대비하고 싶습니다.onChange보다 이전에 입력을 캐치하고 선호하는 숫자 만

입력란이 변경되면 바로 테이블 행을 강조 표시 할 코드를 만들었습니다. 단점은 사용자가 입력 필드 외부를 클릭 한 후에 코드가 트리거된다는 것입니다.

달성하고자하는 것은 다음과 같습니다. 모든 자리 후

  • 즉시 뭔가 사용자 유형 등의 심지어 트리거, 등 테이블 행을 강조 할이 이벤트/백 스페이스를 입력합니다. 나중에이 함수를 확장하여 양식을 로컬에 자동 저장하지만 나중에 그 코드를 알아낼 것입니다.
  • 는 둘째, 가격의 형태이기 때문에 사용자가 그들 만이 전체 HTML5와 CSS3를 지원을 사용하게 될 브라우저를 숫자

를 입력 할 수 있다면 그것은 좋은 것, 그리고 같은 자바 스크립트 엔진 저는 최신 버전의 jQuery를 사용합니다.

추신. 이것에 대한 단점이 있다면 나에게도 알려주십시오.

+0

keyup()을 사용하십시오. blur() 대신에 추측 일 뿐이지 만, 시도한 것을 보지 않고는 전혀 모른다. HTML5를 사용하면 입력 유형 = "숫자"를 설정할 수 있습니다 –

답변

5

이벤트를 사용하면이 이벤트가 발생할 때 입력 값이 업데이트되지만 사용자가 blur 요소를 변경하기 전에 값을 변경할 수 있습니다.

업데이트 당신은 정규 표현식을 사용하는 경우에만 숫자 입력을 제한 할 수 있습니다

: http://jsfiddle.net/bKsTG/1/

+0

이것은 환상적입니다. –

2

사용 KeyUp 이벤트 및 event.keyCode을 확인하십시오 여기

//bind to the `keyup` event for all `input` element(s) 
$('input').on('keyup', function() { 

    //replace the value of this input by only the digits in it's value 
    //note that this method works even if the user pastes a block of text into the input 
    this.value = this.value.replace(/[^0-9]/gi, ''); 
});​ 

는 데모입니다 값이 숫자인지 확인하려면 백 스페이스를 입력하십시오.

$('selector').keyup(function(event){ 
    if (event.keyCode in [48,49, 50 .... 57,13]){ /* your code*/ }; 
}); 
관련 문제