html5 입력형 번호로 Float 및 10진수 구분자를 처리하는 방법

html5 입력형 번호로 Float 및 10진수 구분자를 처리하는 방법

모바일 브라우저 위주의 웹 앱을 만들고 있습니다.저는 번호 유형의 입력 필드를 사용하기 때문에 (대부분의) 모바일 브라우저는 더 나은 사용자 환경을 위해 숫자 키보드만 호출합니다.이 웹 앱은 주로 소수점 구분자가 점이 아닌 쉼표인 지역에서 사용하기 때문에 두 소수점 구분자를 모두 처리해야 합니다.

이 모든 혼란을 점과 쉼표로 어떻게 덮을 수 있을까요?

내 연구 결과:

데스크톱 크롬

• 입력유형=번호
• 사용자가 입력 필드에 "4,55"를 입력합니다.
• $("#my_input").val();"455"를 반환합니다.
• 입력한 값이 정확하지 않습니다.

데스크톱 파이어폭스

• 입력유형=번호
• 사용자가 입력 필드에 "4,55"를 입력합니다.
• $("#my_input").val();"4,55"를 반환합니다.
• 괜찮아요, 쉼표를 점으로 대체해서 정확한 플로트를 얻을 수 있습니다.

안드로이드 브라우저

• 입력유형=번호
• 사용자가 입력 필드에 "4,55"를 입력합니다.
• 입력이 포커스를 잃으면 값이 "4"로 잘립니다.
• 사용자가 혼동함

윈도폰8

• 입력유형=번호
• 사용자가 입력 필드에 "4,55"를 입력합니다.
• $("#my_input").val();"4,55"를 반환합니다.
• 괜찮아요, 쉼표를 점으로 대체해서 정확한 플로트를 얻을 수 있습니다.

사용자가 쉼표 또는 점을 소수 구분 기호로 사용하고 HTML 입력 유형을 숫자로 유지하여 더 나은 사용자 경험을 제공하고자 할 때 이러한 상황에서 "최상의 방법"은 무엇입니까?

키 이벤트를 바인딩하는 쉼표를 "즉시"로 변환할 수 있습니까? 숫자 입력과 함께 작동합니까?

편집

현재 저는 어떤 유형이 숫자로 설정되어 있는지 입력에서 float value(문자열 또는 숫자)를 가져오는 방법에 대한 해결책이 없습니다.최종 사용자가 "4,55"를 입력하면 크롬은 항상 "455"를 반환하고 파이어폭스는 "4,55"를 반환합니다.

또한 안드로이드(테스트된 4.2 에뮬레이터)에서 입력 필드에 "4,55"를 입력하고 포커스를 다른 곳으로 바꾸면 입력된 숫자가 "4"로 잘리는 것도 상당히 짜증납니다.

의 은 을 해야 이라고 합니다 에서 합니다 이라고 의 에서 해야 step는성::1 검사 값을 허용하도록 그에합니다. 입력의 유효성 검사 알고리즘이 부동 소수점 값을 허용하도록 하려면 그에 따라 단계를 지정합니다.

예를 들어 달러 금액을 원했기 때문에 다음과 같은 단계를 지정했습니다.

 <input type="number" name="price"
           pattern="[0-9]+([\.,][0-9]+)?" step="0.01"
            title="This should be a number with up to 2 decimal places.">

의 jQuery를 가져오는 은 유용합니다.validity.valid소유물.

소수점에 대해서도 비슷한 문제가 있었는데, 문제가 있다는 것을 알게 된 이유는 트위터 부트스트랩이 잘못된 값의 숫자 입력에 추가하는 스타일링 때문이었습니다.

에 가 을 이 된 이 에 된 가 을 step합니다. attribute는 attribute재이지를다할수를면고다수e할를를serte면s,

• jsFiddle

TL;DR: a astep동점을다에합니다 입니다. 기본값은 다음과 같습니다.1.

참고: 쉼표가 유효하지는 않지만 OS 언어/지역 설정을 쉼표를 소수점 구분자로 사용하는 곳으로 설정하면 작동할 것 같습니다.*참고 사항*: Ubuntu/Gnome 14.04의 OS 언어/키보드 설정 *독일어*의 경우에는 그렇지 않았습니다.

w3.org 에 따르면 숫자 입력의 값 속성은 부동 소수점 숫자로 정의됩니다.부동 소수점 숫자의 구문은 소수점 구분자로만 점을 받아들이는 것 같습니다.

아래에 도움이 될 수 있는 몇 가지 옵션을 나열했습니다.

1. 패턴 속성 사용

패턴 특성을 사용하면 HTML5 호환 방식으로 정규식을 사용하여 허용된 형식을 지정할 수 있습니다.여기서 쉼표 문자를 허용하고 패턴이 실패할 경우 유용한 피드백 메시지를 지정할 수 있습니다.

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" name="my-num"
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

참고: 크로스 브라우저 지원은 매우 다양합니다.완전하거나 부분적이거나 존재하지 않을 수 있습니다.

2. 자바스크립트 검증

예를 들어 쉼표를 대체하거나 모두 유효성을 확인하는 on change(및/또는 블러) 이벤트에 간단한 콜백을 바인딩할 수 있습니다.

3. 브라우저 유효성 검사 ## 사용 안 함

셋째, 해당 필드에 대한 브라우저 유효성 검사를 모두 비활성화할 의도로 폼노 유효성 검사 속성을 숫자 입력에 사용할 수 있습니다.

<input type="number" formnovalidate />

4. 조합..?

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" 
           name="my-num" formnovalidate
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

쉼표를 사용할지 마침표를 사용할지는 전적으로 브라우저에 달려 있습니다.브라우저는 운영 체제 또는 브라우저의 로케일에 따라 결정하거나, 일부 브라우저는 웹 사이트에서 힌트를 가져옵니다.서로 다른 브라우저가 서로 다른 현지화 방식을 어떻게 처리하는지 보여주는 브라우저 비교 차트를 만들었습니다.사파리는 쉼표와 마침표를 번갈아가며 처리하는 유일한 브라우저입니다.

기본적으로 웹 작성자인 당신은 이것을 실제로 통제할 수 없습니다.몇 가지 해결 방법은 정수가 있는 두 개의 입력 필드를 사용하는 것입니다.이렇게 하면 모든 사용자가 원하는 대로 데이터를 입력할 수 있습니다.특별히 섹시하지는 않지만, 모든 사용자에게 모든 경우에 효과가 있을 것입니다.

텍스트 유형을 사용하지만 숫자 키보드를 강제로 표시합니다.

<input value="12,4" type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

입력 모드 태그가 해결책입니다.

대신 사용.val().

입력 .valueAsNumber [ = value ]

해당되는 경우 폼 컨트롤의 값을 나타내는 숫자를 반환하고 그렇지 않으면 null을 반환합니다.
값을 변경하도록 설정할 수 있습니다.
컨트롤이 날짜 또는 시간 기반이 아니며 숫자가 아닌 경우 INVALID_STATE_ERR 예외를 발생시킵니다.

완벽한 솔루션을 찾지는 못했지만 제가 할 수 있는 최선의 방법은 type="tel"을 사용하고 html5 검증(formnovalidate)을 비활성화하는 것이었습니다.

<input name="txtTest" type="tel" value="1,200.00" formnovalidate="formnovalidate" />

사용자가 쉼표를 입력하면 내가 시도한 모든 최신 브라우저(최신 FF, IE, 엣지, 오페라, 크롬, 사파리 데스크톱, 안드로이드 크롬)에서 쉼표와 함께 출력됩니다.

가장 큰 문제는 다음과 같습니다.

• 모바일 사용자는 숫자 키보드와 다를 수 있는 전화 키보드를 볼 수 있습니다.
• 더 나쁜 것은 전화 키보드에 쉼표를 위한 키가 없을 수도 있습니다.

사용 사례의 경우 다음과 같은 작업만 수행하면 되었습니다.

• 초기값을 쉼표로 표시합니다(타입=숫자의 경우 처음에 떼어냅니다).
• html5 검증 실패 안 함(쉼표가 있는 경우)
• 필드를 정확히 입력으로 읽습니다(가능한 쉼표 포함).

만약 당신이 비슷한 요구사항을 가지고 있다면 이것이 당신에게 도움이 될 것입니다.

참고: 패턴 속성의 지원이 마음에 들지 않았습니다.양식 검증자가 훨씬 더 효과적인 것 같습니다.

를 $("#my_input").val();문자열 변수로 반환됩니다.용을 합니다.parseFloat그리고.parseInt회심용으로사용할때parseFloat데스크톱이나 전화기 자체가 변수의 의미를 이해합니다.

로 할 를 할 를 로 toFixed다음과 같이 자리수의 수를 논할 수 있습니다.

var i = 0.011;
var ss = i.toFixed(2); //It returns 0.01

브라우저는 Chrome과 Firefox Nightly는 정상이지만 여전히 문제가 있습니다.나는 숫자 필드를 정말로 사용해야 하는 사람들을 위한 해킹 접근법을 가지고 있습니다(아마도 텍스트 필드에 없는 작은 화살표 때문일 것입니다).

마이 솔루션

추가했습니다.keyup폼합니다. event Handler는에한를고이시다면을폼는시다면을t이trre고를et한od .

순수 JS 스니펫 JSFIDDLE

var currentString = '';
var badState = false;
var lastCharacter = null;

document.getElementById("field").addEventListener("keyup",($event) => {
  if ($event.target.value && !$event.target.validity.badInput) {
          currentString = $event.target.value;
  } else if ($event.target.validity.badInput) {
    if (badState && lastCharacter && lastCharacter.match(/[\.,]/) && !isNaN(+$event.key)) {
      $event.target.value = ((+currentString) + (+$event.key / 10));
      badState = false;
    } else {
      badState = true;
    }
  }
  document.getElementById("number").textContent = $event.target.value;
  lastCharacter = $event.key;
});

document.getElementById("field").addEventListener("blur",($event) => {
	if (badState) {
    $event.target.value = (+currentString);
    badState = false;
		document.getElementById("number").textContent = $event.target.value;
  }
});

#result{
  padding: 10px;
  background-color: orange;
  font-size: 25px;
  width: 400px;
  margin-top: 10px;
  display: inline-block;
}

#field{
  padding: 5px;
  border-radius: 5px;
  border: 1px solid grey;
  width: 400px;
}

<input type="number" id="field" keyup="keyUpFunction" step="0.01" placeholder="Field for both comma separators">

<span id="result" >
 <span >Current value: </span>
 <span id="number"></span>
</span>

각도 9 토막

@Directive({
  selector: '[appFloatHelper]'
})
export class FloatHelperDirective {
  private currentString = '';
  private badState = false;
  private lastCharacter: string = null;

  @HostListener("blur", ['$event']) onBlur(event) {
    if (this.badState) {
      this.model.update.emit((+this.currentString));
      this.badState = false;
    }
  }

  constructor(private renderer: Renderer2, private el: ElementRef, private change: ChangeDetectorRef, private zone: NgZone, private model: NgModel) {
    this.renderer.listen(this.el.nativeElement, 'keyup', (e: KeyboardEvent) => {
      if (el.nativeElement.value && !el.nativeElement.validity.badInput) {
        this.currentString = el.nativeElement.value;
      } else if (el.nativeElement.validity.badInput) {
        if (this.badState && this.lastCharacter && this.lastCharacter.match(/[\.,]/) && !isNaN(+e.key)) {
          model.update.emit((+this.currentString) + (+e.key / 10));
          el.nativeElement.value = (+this.currentString) + (+e.key / 10);
          this.badState = false;
        } else {
          this.badState = true;
        }
      }       
      this.lastCharacter = e.key;
    });
  }
  
}

<input type="number" matInput placeholder="Field for both comma separators" appFloatHelper [(ngModel)]="numberModel">

제 추천이요?jQuery를 전혀 사용하지 마십시오.저도 당신과 같은 문제가 있었습니다.발견했습니다.$('#my_input').val()항상 이상한 결과를 답례합니다.

사용해 봅니다.document.getElementById('my_input').valueAsNumber대신에$("#my_input").val();그런 다음 사용합니다.Number(your_value_retrieved)번호를 생성하려고 합니다.값이 NaN이면 숫자가 아니라는 것을 확실히 알 수 있습니다.

한 가지 추가할 것은 입력에 숫자를 쓸 때 입력은 실제로 거의 모든 문자(유로 기호, 달러 및 기타 모든 특수 문자를 쓸 수 있음)를 받아들일 것이므로 다음을 사용하여 값을 검색하는 것이 가장 좋습니다..valueAsNumberjQuery를 사용하는 대신에.

아, 그리고 그것은 사용자가 국제화를 추가할 수 있게 해주는 것입니다(즉, 소수점을 만들기 위해 점 대신 쉼표를 지원하는 것).그냥 놔둬요.Number()당신을 위해 무언가를 창조하는 것을 목표로 하고 있습니다. 말하자면, 그것은 십진법적으로 안전할 것입니다.

숫자 입력에서 LocaleString()을 사용하고 싶은 것 같습니다.

사용방법은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString 을 참조하십시오.

JS에서 숫자의 현지화는 크롬에서 작동하지 않는 국제화(num.toLocaleString())에서도 적용됩니다.

언급URL : https://stackoverflow.com/questions/15303940/how-to-handle-floats-and-decimal-separators-with-html5-input-type-number