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 zstep
atrybutem wydają się nie działać.
Odpowiedzi:
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ż
BODY
tag ma przypisany atrybutlang="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
DIV
dany atrybutlang="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.
źródło
lang
Atrybut można ustawić bezpośrednio w elemencie wejściowym.lang
atrybut faktycznie zrobił różnicę dla mnie, dzięki!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
źródło
Zgodnie ze specyfikacją możesz użyć
any
jako wartościstep
atrybutu:<input type="number" step="any">
źródło
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.
źródło
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)!
źródło
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.źródło
$("input[type=number]").on("keydown", function(e) { if(e.keyCode === 188) { this.value += "."; e.preventDefault(); }});
(po pełnym załadowaniu strony wraz ze wszystkimi wejściami liczbowymi)888,
ustawienievalue
właściwości powoduje wyświetlenie ostrzeżenia informującego, że888.
nie jest to poprawna liczba (wyrażenie regularne wymaga co najmniej jednej liczby po kropce) i powoduje wyczyszczenie pola. Wpisanie kropki działa jednak, prawdopodobnie dlatego, że dane wejściowe traktują swoją wartość jako „w toku” i czeka naZnalazł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:
step
pomaga zdefiniować domenę prawidłowych wartościstep
to1
min
domax
włą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,983
rzeczywistoś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.
źródło
O ile rozumiem, HTML5
input type="number
zawsze wracainput.value
jako plikstring
.Najwyraźniej
input.valueAsNumber
zwraca bieżącą wartość jako liczbę zmiennoprzecinkową. Możesz użyć tego, aby zwrócić żądaną wartość.Zobacz http://diveintohtml5.info/forms.html#type-number
źródło
input.value
rzeczywistości zwraca liczbę kanoniczną z kropką, mimo że jest wyświetlana jako śpiączka. Więc mieszkanie w europejskim kraju trzeciego świata ...Czy rozważałeś użycie do tego Javascript?
$('input').val($('input').val().replace(',', '.'));
źródło
jedną z opcji jest
javascript parseFloat()
... nigdy nie parsuj "text chain" --> 12.3456
z 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.
HTTP
tylko wysyłaTEXT
w kliencie unikaj analizowania współrzędnych wejściowych za pomocą "
int
", pracuj z ciągami tekstowymijeśli drukujesz kable w html z php lub podobnym ... przepłyń do tekstu i drukuj w html
źródło
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
źródło
pattern="\d+\.\d{2}"
takim UX nawet nazwałbym to akceptowalnym ... zrezygnowałbym z części jquery ...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
źródło
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>
źródło
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:
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); }) });
źródło
Atrybut kroku HTML
<input type="number" name="points" step="3">
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ń.
źródło
step="3"
ograniczyłoby wprowadzanie tylko do liczb całkowitych. A ustawieniestep="0.01"
nadal pokazuje to jako śpiączkę; c