HTML5 숫자 입력 (클라이언트 측)에서 쉼표 대신 소수점을 사용합니다.

HTML5 숫자 입력 (클라이언트 측)에서 쉼표 대신 소수점을 사용합니다.

---

일부 브라우저 input type="number"가 숫자 표기법을 현지화하는 것을 보았습니다 .

이제 내 응용 프로그램이 경도 및 위도 좌표를 표시하는 필드에서 "51,983"과 같은 항목이 표시되고 "51.982559"가되어야합니다. 내 해결 방법은 input type="text"대신 사용 하는 것이지만 올바른 소수점 표시와 함께 숫자 입력을 사용하고 싶습니다.

클라이언트 측 로컬 설정에 관계없이 브라우저가 숫자 입력에 소수점을 사용 하도록 강제 하는 방법이 있습니까?

(내 응용 프로그램에서 어쨌든 서버 측에서 이것을 수정하지만 내 설정에서는 (일부 JavaScript 때문에) 클라이언트 측에서도 정확해야합니다).

미리 감사드립니다.

업데이트 현재 Windows 7에서 Chrome 버전 28.0.1500.71 m을 확인하면 숫자 입력은 쉼표로 형식이 지정된 십진수를 허용하지 않습니다. step속성과 함께 제안 된 제안이작동하지 않는 것 같습니다.

http://jsfiddle.net/AsJsj/

---

현재 Firefox는 입력이있는 HTML 요소의 언어를 사용합니다. 예를 들어, Firefox에서이 바이올린을 시도해보십시오.

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

숫자가 아랍어이고 쉼표가 소수점 구분 기호로 사용되는 것을 볼 수 있습니다. 아랍어의 경우입니다. BODY태그에 속성이 부여 되었기 때문 lang="ar-EG"입니다.

다음으로 이것을 시도하십시오.

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

이것은 입력이 DIV주어진 속성에 래핑되기 때문에 소수점 구분 기호로 점과 함께 표시됩니다 lang="en-US".

따라서 사용할 수있는 해결책은 소수점 구분 기호로 점을 사용하는 문화권을 사용하도록 설정된 컨테이너 요소로 숫자 입력을 래핑하는 것입니다.

---

원하는 소수의 정밀도로 지정된 단계 속성을 사용하면 html5 숫자 입력이 소수를 허용합니다. 예. 10.56과 같은 값을 사용합니다. 소수점 이하 두 자리 숫자를 의미합니다.

<input type="number" step="0.01" min="0" lang="en" value="1.99">

최대 허용 값에 ​​대한 max 속성을 추가로 지정할 수 있습니다 .

편집 쉼표 대신 포인트로 십진수 형식을 지정하는 로케일 값을 사용하여 입력 요소에 lang 속성을추가하십시오.

---

받는 사람에 따라 사양 , 당신은 사용할 수 any의 값으로 step속성 :

<input type="number" step="any">

---

안타깝게도 최신 브라우저에서이 입력 필드의 범위는 매우 낮습니다.

http://caniuse.com/#feat=input-number

따라서 필드가 일반적으로 받아 들여질 때까지 폴백을 예상하고 프로그래밍 방식으로로드가 많은 입력 [type = text]에 의존하여 작업을 수행하는 것이 좋습니다.

지금까지 Chrome, Safari 및 Opera 만 깔끔하게 구현되었지만 다른 모든 브라우저는 버그가 있습니다. 그들 중 일부는 (BB10과 같은) 소수를 지원하지 않는 것 같습니다!

---

입력에 lang 속성을 사용하십시오. 내 웹 앱 fr_FR의 로케일, 입력 번호의 lang = "en_EN"및 쉼표 또는 점을 무관심하게 사용할 수 있습니다. Firefox는 항상 점을 표시하고 Chrome은 쉼표를 표시합니다. 그러나 두 separtor는 모두 유효합니다.

---

이것이 도움이되는지 모르겠지만 동일한 문제를 검색 할 때 입력 관점 에서만 우연히 발견했습니다 (즉 <input type="number" />, 값을 입력 할 때 쉼표와 점을 모두 허용하는 것으로 나타 났지만 후자 만 입력에 할당 한 angularjs 모델에 바인딩 됨). 그래서이 빠른 지시문을 적어 해결했습니다.

.directive("replaceComma", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.on("keydown", function(e) {
                if(e.keyCode === 188) {
                    this.value += ".";
                    e.preventDefault();
                }
            });
        }
    };
});

그런 다음 내 HTML에서 <input type="number" ng-model="foo" replace-comma />쉼표를 점으로 즉시 대체하여 사용자가 잘못된 (로케일이 아닌 자바 스크립트 관점에서!) 숫자를 입력하지 못하도록 방지합니다. 건배.

---

Chrome에서 HTML5 입력 유형 = 숫자 및 소수 / 부동 소수점과 관련된 내용을 설명하는 블로그 기사를 찾았습니다.

요약해서 말하자면:

• step유효한 값의 도메인을 정의 하는 데 도움이
• 기본값 step은1
• thus the default domain is integers (between min and max, inclusive, if given)

I would assume that's conflating with the ambiguity of using a comma as a thousand separator vs a comma as a decimal point, and your 51,983 is actually a strangely-parsed fifty-one thousand, nine hundred and eight-three.

Apparently you can use step="any" to widen the domain to all rational numbers in range, however I've not tried it myself. For latitude and longitude I've successfully used:

<input name="lat" type="number" min="-90.000000" max="90.000000" step="0.000001">
<input name="lon" type="number" min="-180.000000" max="180.000000" step="0.000001">

It might not be pretty, but it works.

---

As far as I understand it, the HTML5 input type="number always returns input.value as a string.

Apparently, input.valueAsNumber returns the current value as a floating point number. You could use this to return a value you want.

See http://diveintohtml5.info/forms.html#type-number

---

Have you considered using Javascript for this?

$('input').val($('input').val().replace(',', '.'));

---

one option is javascript parseFloat()... never do parse a "text chain" --> 12.3456 with point to a int... 123456 (int remove the point) parse a text chain to a FLOAT...

to send this coords to a server do this sending a text chain. HTTP only sends TEXT

in the client keep out of parsing the input coords with "int", work with text strings

if you print the cords in the html with php or similar... float to text and print in html

---

1) 51,983 is a string type number does not accept comma

so u should set it as text

<input type="text" name="commanumber" id="commanumber" value="1,99" step='0.01' min='0' />

replace , with .

and change type attribute to number

$(document).ready(function() {
    var s = $('#commanumber').val().replace(/\,/g, '.');   
    $('#commanumber').attr('type','number');   
    $('#commanumber').val(s);   
});

Check out http://jsfiddle.net/ydf3kxgu/

Hope this solves your Problem

---

use the pattern

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

good luck

참고URL : https://stackoverflow.com/questions/6178332/force-decimal-point-instead-of-comma-in-html5-number-input-client-side