Widziałem, że niektóre przeglądarki lokalizują input type="number"zapis liczb.

Tak więc teraz, w polach, w których moja aplikacja wyświetla współrzędne długości i szerokości geograficznej, otrzymuję informacje takie jak „51 983”, gdzie powinno być „51,982559”. Moje obejście polega na użyciu input type="text"zamiast tego, ale chciałbym użyć wprowadzania liczb z prawidłowym wyświetlaniem miejsc dziesiętnych.

Czy istnieje sposób, aby zmusić przeglądarki do używania przecinka dziesiętnego w danych wejściowych, niezależnie od lokalnych ustawień po stronie klienta?

(Jest rzeczą oczywistą, że w mojej aplikacji i tak poprawiam to po stronie serwera, ale w mojej konfiguracji potrzebuję również, aby była poprawna po stronie klienta (z powodu niektórych JavaScript)).

Z góry dziękuję.

AKTUALIZACJA W tej chwili podczas sprawdzania w Chrome w wersji 28.0.1500.71 m w systemie Windows 7 wprowadzane liczby po prostu nie akceptują liczb dziesiętnych sformatowanych przecinkiem. Proponowane sugestie zstepatrybutem wydają się nie działać.

http://jsfiddle.net/AsJsj/

Obecnie Firefox honoruje język elementu HTML, w którym znajdują się dane wejściowe. Na przykład spróbuj tego skrzypiec w przeglądarce Firefox:

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

Zobaczysz, że cyfry są w języku arabskim, a przecinek jest używany jako separator dziesiętny, tak jak w przypadku języka arabskiego. Dzieje się tak, ponieważ BODYtag ma przypisany atrybut lang="ar-EG".

Następnie spróbuj tego:

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

Ten jest wyświetlany z kropką jako separatorem dziesiętnym, ponieważ dane wejściowe są opakowane w DIVdany atrybut lang="en-US".

Tak więc rozwiązaniem, do którego możesz się uciec, jest zawijanie danych wejściowych numerycznych elementem kontenera, który jest ustawiony tak, aby używał kultury używającej kropek jako separatora dziesiętnego.

Z atrybutem step podanym z dokładnością do wymaganych miejsc dziesiętnych i atrybutem lang [ustawionym na ustawienie regionalne, które formatuje ułamki dziesiętne z kropką ], dane wejściowe w formacie HTML5 będą akceptować liczby dziesiętne. na przykład. przyjmować wartości takie jak 10,56; mam na myśli 2 cyfry dziesiętne, zrób to:

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

Możesz dodatkowo określić atrybut max dla maksymalnej dopuszczalnej wartości.

Edytować Dodaj atrybut lang do elementu wejściowego z wartością regionalną, która formatuje ułamki dziesiętne za pomocą kropki zamiast przecinka

Zgodnie ze specyfikacją możesz użyć anyjako wartości stepatrybutu:

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

Użyj atrybutu lang na wejściu. Ustawienia regionalne w mojej aplikacji internetowej fr_FR, lang = "en_EN" w numerze wejściowym i mogę bez znaczenia użyć przecinka lub kropki. Firefox zawsze wyświetla kropkę, Chrome przecinek. Ale oba separtor są ważne.

Niestety, pokrycie tego pola wejściowego w nowoczesnych przeglądarkach jest bardzo małe:

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

Dlatego zalecam spodziewać się powrotu i polegać na mocno obciążonym programowo wejściu [typ = tekst], aby wykonać zadanie, dopóki pole nie zostanie ogólnie zaakceptowane.

Jak dotąd tylko Chrome, Safari i Opera mają zgrabną implementację, ale wszystkie inne przeglądarki zawierają błędy. Niektóre z nich nawet nie obsługują liczb dziesiętnych (jak BB10)!

Nie wiem, czy to pomaga, ale natknąłem się tutaj, szukając tego samego problemu, tylko z punktu widzenia wejścia (tj. Zauważyłem, że <input type="number" />podczas wpisywania wartości przyjmowałem przecinek i kropkę, ale tylko ta ostatnia była związany z modelem angularjs, który przypisałem do wejścia). Więc rozwiązałem, zapisując tę ​​szybką dyrektywę:

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

Następnie w moim html po prostu: <input type="number" ng-model="foo" replace-comma />zastąpi przecinki kropkami w locie, aby uniemożliwić użytkownikom wprowadzanie nieprawidłowych (z punktu widzenia javascript, a nie lokalnych!) Liczb. Twoje zdrowie.

Znalazłem artykuł na blogu, który wydaje się wyjaśniać coś związanego:
typ danych wejściowych HTML5 = liczba i liczby dziesiętne / zmiennoprzecinkowe w Chrome

W podsumowaniu:

• steppomaga zdefiniować domenę prawidłowych wartości
• wartość domyślna stepto1
• tak więc domena domyślna to liczby całkowite (od mindo maxwłącznie, jeśli podano)

Zakładam, że jest to równoznaczne z niejednoznacznością użycia przecinka jako separatora tysięcy, a przecinka jako przecinka dziesiętnego, a w 51,983rzeczywistości jest to dziwnie przeanalizowane pięćdziesiąt jeden tysięcy dziewięćset osiem-trzy.

Najwyraźniej można step="any"rozszerzyć domenę na wszystkie liczby wymierne w zakresie, jednak sam tego nie próbowałem. Dla szerokości i długości geograficznej z powodzeniem użyłem:

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

Może nie jest ładne, ale działa.

O ile rozumiem, HTML5 input type="numberzawsze wraca input.valuejako plik string.

Najwyraźniej input.valueAsNumberzwraca bieżącą wartość jako liczbę zmiennoprzecinkową. Możesz użyć tego, aby zwrócić żądaną wartość.

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

Czy rozważałeś użycie do tego Javascript?

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

jedną z opcji jest javascript parseFloat()... nigdy nie parsuj " text chain" --> 12.3456z punktem do int ...123456 (int usuń punkt)" analizuj łańcuch tekstowy do typu FLOAT ...

aby wysłać te współrzędne do serwera, wykonaj to wysyłając łańcuch tekstowy. HTTPtylko wysyłaTEXT

w kliencie unikaj analizowania współrzędnych wejściowych za pomocą " int", pracuj z ciągami tekstowymi

jeśli drukujesz kable w html z php lub podobnym ... przepłyń do tekstu i drukuj w html

1) 51,983 to liczba typu string nie akceptuje przecinków

więc powinieneś ustawić go jako tekst

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

zamienić .

i zmień atrybut typu na numer

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

Sprawdzić http://jsfiddle.net/ydf3kxgu/

Mam nadzieję, że to rozwiąże Twój problem

użyj wzoru

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

powodzenia

Aby to zrobić, napisałem niestandardowy fragment kodu

Jeśli chcesz zamienić ,z .wyjmij translate_decimals funkcje całkowicie.

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>

Musiałem upewnić się, że wartości nadal można wprowadzać przecinkiem zamiast kropki jako separator dziesiętny. Wydaje się, że jest to odwieczny problem. Informacje ogólne można znaleźć pod tymi linkami:

• https://www.slightfuture.com/webdev/html5-input-number-localization.html
• https://codepen.io/aminimalanimal/full/bdOzRG

W końcu rozwiązałem to za pomocą odrobiny jQuery. Zastępowanie przecinków kropkami przy opcji Zmień. Jak dotąd wydaje się, że działa to dobrze w najnowszych przeglądarkach Firefox, Chrome i Safari.

$('input[type=number]').each(function () {

  $(this).change(function () {

    var $replace = $(this).val().toString().replace(/,/g, '.');

    $(this).val($replace);

  })

});

Atrybut kroku HTML

<input type="number" name="points" step="3">

Przykład: jeśli krok = „3”, liczby prawne mogą wynosić -3, 0, 3, 6 itd.

Wskazówka: atrybutu step można używać razem z atrybutami max i min, aby utworzyć zakres wartości prawnych.

Uwaga: Atrybut step działa z następującymi typami danych wejściowych: liczba, zakres, data, data i godzina, lokalna data i godzina, miesiąc, godzina i tydzień.