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

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

내 발견 :

데스크톱 크롬

• 입력 유형 = 숫자
• 사용자는 “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”로 잘립니다.

답변

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

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

<input type="number" formnovalidate />

<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]+">

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

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