주로 모바일 브라우저 용 웹 앱을 구축하고 있습니다. 숫자 유형의 입력 필드를 사용하므로 대부분의 모바일 브라우저는 더 나은 사용자 경험을 위해 숫자 키보드 만 호출합니다. 이 웹 응용 프로그램은 주로 소수점이 아닌 쉼표가있는 영역에서 사용되므로 소수점 구분 기호를 모두 처리해야합니다.

이 모든 혼란을 점과 쉼표로 덮는 방법은 무엇입니까?

내 발견 :

데스크톱 크롬

• 입력 유형 = 숫자
• 사용자는 "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 입력 유형을 숫자로 유지하여 더 나은 사용자 경험을 제공하려는 경우 이런 종류의 상황에서 "모범 사례"는 무엇입니까?

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

편집하다

Currenlty 나는 해결책이 없습니다. 유형이 숫자로 설정된 입력에서 float 값 (문자열 또는 숫자)을 얻는 방법. 최종 사용자가 "4,55"를 입력하면 Chrome은 항상 "455"를 반환하고 Firefox는 "4,55"를 반환합니다.

또한 Android (테스트 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를 사용하여 값을 검색하는 데 아무런 문제가 없지만 DOM API를 사용하여 요소의 validity.valid속성 을 얻는 것이 유용하다는 것을 알 수 있습니다.

소수점과 비슷한 문제가 있었지만 문제가 있음을 깨달은 이유는 Twitter Bootstrap이 잘못된 값으로 숫자 입력에 추가하는 스타일 때문이었습니다.

다음은 step속성을 추가 하면 작동 한다는 것을 보여주는 바이올린 이며 현재 값이 유효한지 테스트합니다.

• jsFiddle

TL; DR : 속성의 기본값은이므로 부동 소수점 값으로 설정하십시오 .step1

참고 : 쉼표는 나를 위해 유효성을 검사하지 않지만 OS 언어 / 지역 설정을 쉼표를 소수점 구분 기호로 사용하는 곳으로 설정하면 작동합니다. *주의 사항 * : Ubuntu / Gnome 14.04의 OS 언어 / 키보드 설정 * 독일어 *의 경우에는 해당되지 않았습니다.

w3.org에 따르면 숫자 입력 의 value 속성은 부동 소수점 숫자 로 정의됩니다 . 부동 소수점 숫자의 구문은 점을 소수 구분 기호로만 허용하는 것으로 보입니다.

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

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. JavaScript 검증

간단한 콜백을 onchange (및 / 또는 쉼표를 바꾸거나 모두 함께 확인 blur ) 이벤트에 있습니다.

3. 브라우저 유효성 검사 비활성화 ##

셋째 , 해당 필드에 대해 브라우저 유효성 검증을 사용하지 않도록하기 위해 숫자 입력에 formnovalidate 속성 을 사용하려고 할 수 있습니다.

<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."/>

소수점 구분 기호에 쉼표 또는 마침표를 사용할지 여부는 전적으로 브라우저에 달려 있습니다. 브라우저는 운영 체제 또는 브라우저의 로캘을 기반으로 결정하거나 일부 브라우저는 웹 사이트에서 힌트를 얻습니다. 브라우저 비교 차트를 만들었 습니다다른 브라우저가 다른 현지화 방법을 처리하는 방법을 보여주는 를 . Safari는 쉼표와 마침표를 상호 교환 할 수있는 유일한 브라우저입니다.

기본적으로 웹 작성자는 실제로 이것을 제어 할 수 없습니다. 일부 해결 방법은 정수가있는 두 개의 입력 필드를 사용하는 것입니다. 이를 통해 모든 사용자가 예상대로 데이터를 입력 할 수 있습니다. 특히 섹시하지는 않지만 모든 경우에 모든 사용자에게 적용됩니다.

valueAsNumber대신 사용하십시오 .val().

입력. valueAsNumber [= 값]

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

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

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

inputmode 태그는 솔루션입니다

완벽한 솔루션을 찾지 못했지만 type = "tel"을 사용하고 html5 유효성 검사 (formnovalidate)를 비활성화하는 것이 가장 좋습니다.

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

사용자가 쉼표를 넣으면 내가 시도한 모든 최신 브라우저 (최신 FF, IE, edge, opera, chrome, safari desktop, android chrome)에서 쉼표로 출력됩니다.

주요 문제는 다음과 같습니다.

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

내 유스 케이스의 경우 다음을 수행해야했습니다.

• 쉼표로 초기 값을 표시합니다 (firefox는 type = number에 대해 제거).
• html5 유효성 검사에 실패하지 않음 (쉼표가있는 경우)
• 필드를 입력으로 정확하게 읽습니다 (쉼표 사용 가능)

비슷한 요구 사항이 있으면 효과가 있습니다.

참고 : 패턴 속성 지원이 마음에 들지 않았습니다. formnovalidate가 훨씬 잘 작동하는 것 같습니다.

호출 $("#my_input").val();하면 문자열 변수로 반환됩니다. 따라서 사용 parseFloat하고 parseInt변환하십시오. parseFloat데스크탑 또는 전화 를 사용할 때 ITSELF 는 변수의 의미를 이해합니다.

또한 다음과 toFixed같이 자릿수를 인수로 갖는 인수 를 사용하여 float를 문자열로 변환 할 수 있습니다.

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

Chrome 및 Firefox Nightly가 잘 작동하지만 브라우저에 여전히 문제가 있습니다. 나는 실제로 숫자 필드를 사용해야하는 사람들을위한 해키 접근법을 가지고 있습니다 (텍스트 필드에없는 작은 화살표 때문에).

내 솔루션

keyup양식 처리기에 이벤트 처리기를 추가 하고 상태를 추적하고 다시 유효하게되면 값을 설정했습니다.

순수 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를 사용하는 대신.

아, 그리고 BTW는 사용자가 국제화를 추가 할 수있게합니다 (예 : 소수점 대신 쉼표를 지원하여 10 진수를 작성). Number()객체가 당신을 위해 무언가를 만들 도록하십시오 . 말하면 그것은 안전합니다.

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

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

JS에서 숫자의 지역화는 국제화 (숫자 형식 "num.toLocaleString ()")에서도 작동하지 않습니다.