2016-08-23 6 views
2

문제점이 있습니다. 입력 형식이 number인데 mozila 파이어 폭스 브라우저에서 알파벳을 사용하고 있습니다. 크롬에서는 잘 작동하지만 파이어 폭스에서는 작동하지 않습니다. 크롬으로 작동하고 어떤 알파벳도 가져 가지 않습니다. 나는 Mozila firefox 버전 48.0을 사용하고 있습니다. 아래 코드를 설명하고 있습니다.입력 형식 번호가 파이어 폭스에서 작동하지 않습니다

<input type="number" class="form-control oditek-form" ng-model="type" name="type" step="1" min="0" placeholder="Add Type"> 

도와주세요.

+0

Firefox의 경우 자바 스크립트가 없으면 불가능합니다. 여전히 필드가 작동하고 있습니다. 잘못된 것이고 임의의 비 숫자 기호를 입력하면 필드에서 유효성이 검사되지 않습니다. 예제가 필요한 경우 JS를 사용하여이를 수행하는 방법을 알려주세요. –

+0

Mac OSX의 Firefox 39는 기본적으로 알파 문자 입력을 차단하지 않으며 파이어 폭스 42는 유효성 검사 만하지만 알파 키 입력은 비활성화하지 않습니다. 추천자 : http://caniuse.com/#feat=input-number (알려진 이슈 탭) – Venkat

답변

1

, 난 등 caracters 공백을 입력 내 입력 유형 번호를 개발 같은 문제가 있었다 ... 나는 [1- "= 태그 패턴의 해결책을 발견했다 9] ",하지만 불행히도 그것은 나를 위해 작동하지 않았다. 어떤 결과없이 검색의 와일드 후, 나는 내 자신의 기능을 개발하기로 결정했습니다. 어쨌든 자바 스크립트는 거의 유사한,이 예제에서 각 2를 사용하여 메신저, 그래서 당신은 모든 경우에이 코드를 사용할 수 있습니다 : 함수 FilterInput 여기

<input class="form-control form-control-sm" id="qte" type="number" min="1" max="30" step="1" [(ngModel)]="numberVoucher" 
    (keypress)="FilterInput($event)" /> 

됩니다 :

FilterInput(event: any) { 
     let numberEntered = false; 
     if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) { //input number entered or one of the 4 directtion up, down, left and right 
      //console.log('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode); 
      numberEntered = true; 
     } 
     else { 
      //input command entered of delete, backspace or one of the 4 directtion up, down, left and right 
      if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 46 || event.which == 8) { 
       //console.log('input command entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode); 
      } 
      else { 
       //console.log('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode); 
       event.preventDefault(); 
      } 
     } 
     // input is not impty 
     if (this.validForm) { 
      // a number was typed 
      if (numberEntered) { 
       let newNumber = parseInt(this.numberVoucher + '' + String.fromCharCode(event.which)); 
       console.log('new number : ' + newNumber); 
       // checking the condition of max value 
       if ((newNumber <= 30 && newNumber >= 1) || Number.isNaN(newNumber)) { 
        console.log('valid number : ' + newNumber); 
       } 
       else { 
        console.log('max value will not be valid'); 
        event.preventDefault(); 
       } 
      } 
      // command of delete or backspace was types 
      if (event.keyCode == 46 || event.which == 8) { 
       if (this.numberVoucher >= 1 && this.numberVoucher <= 9) { 
        console.log('min value will not be valid'); 
        this.numberVoucher = 1; 
        //event.preventDefault(); 
        this.validForm = true; 
       } 
      } 
     } 
     // input is empty 
     else { 
      console.log('this.validForm = true'); 
      this.validForm = false; 
     } 
    }; 
여기에 HTML입니다

이 함수에서는 숫자, 방향, 삭제의 키 누르기 만 입력해야했습니다.

관련 문제