일부 브라우저 input type="number"가 숫자 표기법을 현지화하는 것을 보았습니다 .
이제 내 응용 프로그램이 경도와 위도 좌표를 표시하는 필드에서 "51,983"과 같이 "51.982559"가되어야합니다. 내 해결 방법은 input type="text"대신 사용 하는 것이지만 올바른 소수점 표시와 함께 숫자 입력을 사용하고 싶습니다.
클라이언트 측 로컬 설정에 관계없이 브라우저가 숫자 입력에 소수점을 사용 하도록 강제 하는 방법이 있습니까?
(내 응용 프로그램에서 어쨌든 서버 측에서 이것을 수정하지만 내 설정에서는 (일부 JavaScript 때문에) 클라이언트 측에서도 정확해야합니다).
미리 감사드립니다.
업데이트
현재 Windows 7에서 Chrome 버전 28.0.1500.71 m을 확인하면 숫자 입력은 쉼표로 형식이 지정된 십진수를 허용하지 않습니다. step속성과 함께 제안 된 제안이작동하지 않는 것 같습니다.
답변:
현재 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".
따라서 사용할 수있는 해결책은 소수점 구분 기호로 점을 사용하는 문화권을 사용하도록 설정된 컨테이너 요소로 숫자 입력을 래핑하는 것입니다.
lang입력 요소에서 직접 속성을 설정할 수 있습니다 .
lang속성은 실제로 저에게 차이를 만들었습니다. 감사합니다!
와 단계 원하는 소수의 정밀도로 지정된 속성, 그리고 랭 [와 형식의 소수하는 로케일로 설정되어있는 속성 기간 , 당신의 HTML5 숫자 입력이 소수를 받아 들일 것입니다]. 예. 10.56과 같은 값을 사용합니다. 소수점 이하 두 자리 숫자를 의미합니다.
<input type="number" step="0.01" min="0" lang="en" value="1.99">
최대 허용 값에 대한 max 속성을 추가로 지정할 수 있습니다 .
편집 쉼표 대신 포인트로 십진수를 형식화하는 로케일 값을 사용하여 입력 요소에 lang 속성을 추가하십시오.
안타깝게도 최신 브라우저에서이 입력 필드의 범위는 매우 낮습니다.
http://caniuse.com/#feat=input-number
따라서 필드가 일반적으로 받아 들여질 때까지 폴백을 예상하고 프로그래밍 방식으로로드가 많은 입력 [type = text]에 의존하여 작업을 수행하는 것이 좋습니다.
지금까지 Chrome, Safari 및 Opera 만 깔끔하게 구현되었지만 다른 모든 브라우저는 버그가 있습니다. 그들 중 일부는 (BB10과 같은) 소수를 지원하지 않는 것 같습니다!
이것이 도움이되는지 모르겠지만 동일한 문제를 검색 할 때 입력 관점 에서만 우연히 발견했습니다 (즉 <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 />쉼표를 점으로 즉시 대체하여 사용자가 잘못된 (로케일이 아닌 자바 스크립트 관점에서!) 숫자를 입력하지 못하도록 방지합니다. 건배.
$("input[type=number]").on("keydown", function(e) { if(e.keyCode === 188) { this.value += "."; e.preventDefault(); }});(페이지가 완전히 모두와 함께 숫자 입력을로드 한 후)
888,설정하면 유효한 숫자가 아니라는 value경고가 표시되고 888.(정규식에는 점 다음에 하나 이상의 숫자가 필요함) 필드가 공백으로 표시됩니다. 하지만 점을 입력하는 것은 작동합니다. 입력이 해당 값을 "진행 중"으로 간주하고 더 많은 숫자가 입력
관련 내용을 설명하는 블로그 기사를 찾았습니다.
Chrome에서 HTML5 입력 유형 = 숫자 및 소수 / 부동 소수점과 같은
요약하자면:
step유효한 값의 도메인을 정의 데 도움이step 은1min와 사이 max, 주어진 경우 포함)쉼표를 천 단위 구분 기호로 사용하는 것과 쉼표를 소수점으로 사용하는 모호함과 합치한다고 가정합니다. 51,983 실제로 이상하게 구문 분석 된 5 만 9 백 8 세입니다.
분명히 step="any"범위의 모든 유리수로 도메인을 넓히는 데 사용할 수 있지만 직접 시도하지는 않았습니다. 위도와 경도의 경우 성공적으로 사용했습니다.
<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">
예쁘지 않을 수도 있지만 작동합니다.
한 가지 옵션은 javascript parseFloat()... 결코 text chain" --> 12.3456int를 가리키는 " 를 구문 분석하지 마십시오 .123456 (int는 점을 제거합니다) 텍스트 체인을 FLOAT로 구문 분석합니다 ...
이 좌표를 서버로 보내려면 텍스트 체인을 보내십시오. HTTP보낸다TEXT
클라이언트에서 입력 좌표를 "로 파싱하지 마십시오.int "로 텍스트 문자열로 작업하십시오.
php 또는 이와 유사한 코드를 사용하여 html로 코드를 인쇄하는 경우 ... 텍스트로 부동하고 html로 인쇄
1) 51,983은 쉼표를 허용하지 않는 문자열 유형 번호입니다.
그래서 당신은 그것을 텍스트로 설정해야합니다
<input type="text" name="commanumber" id="commanumber" value="1,99" step='0.01' min='0' />
을.
유형 속성을 숫자로 변경
$(document).ready(function() {
var s = $('#commanumber').val().replace(/\,/g, '.');
$('#commanumber').attr('type','number');
$('#commanumber').val(s);
});
체크 아웃 http://jsfiddle.net/ydf3kxgu/
이것이 문제를 해결하기를 바랍니다.
pattern="\d+\.\d{2}"심지어 허용 등의 UX를 호출 할 것 ... 나는 ...하지만, JQuery와 부분을 드롭 것
패턴 사용
<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."
>
행운을 빕니다
이 작업을 수행하기 위해 사용자 지정 코드를 작성했습니다.
교체 할 경우 ,에 ., 제거는 translate_decimals 완전히 기능을.
var input = document.querySelector('input[role="custom-number"]');
var bincr = document.querySelector('button[role="increment"]');
var bdecr = document.querySelector('button[role="decrement"]');
function translate_decimals(side = 0)
{
input.value = (side == ',' ? input.value.replace('.',',') : input.value.replace(',','.'));
}
translate_decimals(',');
bincr.addEventListener('click', ()=>{
if (input.hasAttribute('max'))
{
if (input.value.substr(0,input.getAttribute('max').length) == input.getAttribute('max').substr(0,input.getAttribute('max').length))
{
return;
}
else
{
translate_decimals('.');
let temp = input.value;
input.value = "";
input.value = (input.hasAttribute('step') ? (parseFloat(temp) + parseFloat(input.getAttribute('step'))) : temp++);
translate_decimals(',');
}
}
});
bdecr.addEventListener('click', ()=>{
if (input.hasAttribute('min'))
{
if (input.value.substr(0,input.getAttribute('min').length) == input.getAttribute('min').substr(0,input.getAttribute('min').length))
{
return;
}
else
{
translate_decimals('.');
input.value = (input.hasAttribute('step') ? (input.value - input.getAttribute('step')) : input.value--);
translate_decimals(',');
}
}
});/* styling increment & decrement buttons */
button[role="increment"],
button[role="decrement"] {
width:32px;
}<input type="text" role="custom-number" step="0.01" min="0" max="0" lang="en" value="1.99">
<button role="increment">+</button>
<button role="decrement">-</button>소수점 대신 쉼표를 사용하여 값을 소수점 구분 기호로 입력 할 수 있는지 확인해야했습니다. 이것은 오래된 문제인 것 같습니다. 배경 정보는 다음 링크에서 찾을 수 있습니다.
마침내 약간의 jQuery로 해결했습니다. 쉼표를 점으로 대체 onChange. 이것은 최신 Firefox, Chrome 및 Safari에서 지금까지 잘 작동하는 것 같습니다.
$('input[type=number]').each(function () {
$(this).change(function () {
var $replace = $(this).val().toString().replace(/,/g, '.');
$(this).val($replace);
})
});
<input type="number" name="points" step="3">
예 : step = "3"인 경우 유효한 숫자는 -3, 0, 3, 6 등이 될 수 있습니다.
팁 : step 속성을 max 및 min 속성과 함께 사용하여 유효한 값 범위를 만들 수 있습니다.
참고 : 단계 속성은 숫자, 범위, 날짜, datetime, datetime-local, 월, 시간 및 주와 같은 입력 유형에서 작동합니다 .
step="3"것이며 입력을 정수로만 제한합니다. 그리고 설정은 step="0.01"여전히 그것을 혼수 상태로 보여줍니다 .c