Wymuś kropkę dziesiętną zamiast przecinka podczas wprowadzania numeru HTML5 (po stronie klienta)

92

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/

chocolata
źródło
Znalazłeś już rozwiązanie? Mam prawie ten sam problem w przeglądarce Chrome 11 w systemie Windows.
Kostas
Nie ma jeszcze rozwiązania. Najlepiej jest tego unikać (i używać typu input = "text"), dopóki nie zostanie to naprawione ...
chocolata,
3
Wygląda na to, że zależy to od ustawień regionalnych Twojej przeglądarki, w moim chrome widzę przecinek, w chrome mojego partnera widzę kropkę.
fguillen
Zobacz także tutaj: stackoverflow.com/a/24423879/196210
Revious
1
Jak niedawno się dowiedziałem, w niektórych krajach zamiast przecinka stosuje się przecinek.
jbutler483

Odpowiedzi:

28

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.

Ashraf Sabry
źródło
3
Ciekawy! Niestety wydaje się, że działa tylko w przeglądarce Firefox, a nie w Chrome (47.0.2526.106)
luis.ap.uyen
Nawet nie w Firefoksie, we Francji
Aubin
8
Firefox przestrzega ustawień językowych strony. Chrome narzuca separator dziesiętny systemu operacyjnego lub przeglądarki? Edge nakłada kropkę dziesiętną, niezależnie od ustawień języka strony, przeglądarki lub systemu operacyjnego. Co za bałagan.
bbsimonbb
1
Nie potrzebujesz elementu opakowania. langAtrybut można ustawić bezpośrednio w elemencie wejściowym.
Jenny O'Reilly,
2
Ten langatrybut faktycznie zrobił różnicę dla mnie, dzięki!
park spa
23

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

Piotr
źródło
28
To nadal nie działa :-( Lokalne wartości po stronie klienta zawsze przekształcają kropkę dziesiętną w przecinek dziesiętny, niezależnie od kroku lub atrybutu wartości. :-(
chocolata
12
Jak rozumiem, nie chodzi o zastosowanie separatora dziesiętnego. Pytanie dotyczy posiadania „.” zamiast „,”, gdy preferowane są ustawienia regionalne klienta „,”.
Emanuele Paolini
bez względu na to, jakiego separatora dziesiętnego użyjesz w atrybucie step - przeglądarka nadal go zlokalizuje. Oznacza to, że z podanym przykładem - w większości krajów europejskich wyświetlana liczba to 10,56
khartvin
1
Wróciłem i ponownie przeczytałem pytanie 5 lat później i zastanawiałem się, dlaczego udzieliłem odpowiedzi powyżej. Zobacz edycję, proszę
Peter
Nie zadziała również, jeśli dane są zapisywane przy użyciu ajax.
somsgod
14

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

<input type="number" step="any">
Halil Özgür
źródło
7

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.

zian974
źródło
6

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)!

opalenzuela
źródło
Korzystanie z biblioteki takiej jak number.js może pomóc w rozwiązaniu nieodłącznych problemów związanych z posiadaniem wielu języków na tej planecie.
pintxo
5

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.

Andrea Aloi
źródło
Cześć Andrea, czy można to zrobić bez Angular JS? Na przykład z jQuery?
czekoladę
5
Jasne, przypuszczam, że możesz napisać na podstawie danych wejściowych liczby, coś w stylu $("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)
Andrea Aloi
2
Ten fragment kodu nie działa w Chrome (testowany z wersją 60). Podczas wpisywania 888,ustawienie valuewłaściwości powoduje wyświetlenie ostrzeżenia informującego, że 888.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 na
wpisanie
5

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.

Matty K.
źródło
W takim razie dobrze, że napisałem podsumowanie, a potem ekstrapolowałem, co?
Matty K,
1

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

Jason Gennaro
źródło
Dzięki, może się przydać!
czekoladę
Zabawne jest to, że w input.valuerzeczywistości zwraca liczbę kanoniczną z kropką, mimo że jest wyświetlana jako śpiączka. Więc mieszkanie w europejskim kraju trzeciego świata ...
Klesun
0

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

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

mhrvatin
źródło
Na chrome z wejściem [typ = numer] nie działa .. przecinek jest zawsze pokazany.
Revious
0

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

Llanis
źródło
0

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

Selvin
źródło
W rzeczywistości ustawienie typu jako tekstu jest w rzeczywistości prawie jedynym rozwiązaniem, które sprawia, że ​​punkt pozostaje niezmienny. W połączeniu z pattern="\d+\.\d{2}"takim UX nawet nazwałbym to akceptowalnym ... zrezygnowałbym z części jquery ...
Klesun
0

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

Cleber Spirlandeli
źródło
1
Cześć, właśnie przetestowałem to w Chrome 62.0.3202.94 w systemie Windows 10. Nie działa. Podczas korzystania z przycisków przewijanych wprowadzanie zmienia się w przecinek zamiast kropki (biorąc pod uwagę belgijskie ustawienia regionalne). W każdym razie dzięki.
chocolata
0

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
0

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);

  })

});
leymannx
źródło
-1

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

Zeeshan Eqbal
źródło
Ale ... ale pytanie dotyczy liczb dziesiętnych, step="3"ograniczyłoby wprowadzanie tylko do liczb całkowitych. A ustawienie step="0.01"nadal pokazuje to jako śpiączkę; c
Klesun