Paksa titik desimal alih-alih koma dalam masukan angka HTML5 (sisi klien)

92

Saya telah melihat bahwa beberapa browser melokalkan input type="number"notasi angka.

Jadi sekarang, di bidang di mana aplikasi saya menampilkan koordinat bujur dan lintang, saya mendapatkan hal-hal seperti "51.983" di mana seharusnya "51.982559". Solusi saya adalah menggunakan input type="text"sebagai gantinya, tetapi saya ingin menggunakan input angka dengan tampilan desimal yang benar.

Apakah ada cara untuk memaksa browser menggunakan titik desimal dalam masukan angka, terlepas dari pengaturan lokal sisi klien?

(Tak perlu dikatakan bahwa dalam aplikasi saya, saya tetap memperbaikinya di sisi server, tetapi dalam pengaturan saya, saya juga membutuhkannya untuk benar di sisi klien (karena beberapa JavaScript)).

Terima kasih sebelumnya.

PEMBARUAN Pada saat ini, memeriksa di Chrome Versi 28.0.1500.71 m pada Windows 7, masukan nomor hanya tidak menerima desimal yang diformat dengan koma. Saran yang diajukan denganstepatribut tampaknya tidak berhasil.

http://jsfiddle.net/AsJsj/

html  google-chrome  input  numbers  decimal 
— chocolata
sumber
Apakah Anda sudah menemukan solusi? Saya mengalami masalah yang hampir sama di Chrome 11 pada Windows.
— Kostas
Belum ada solusi. Tebakan terbaik adalah dengan menghindari ini (dan gunakan input type = "text") sampai ini diperbaiki ...
— chocolata
3
Sepertinya tergantung dari lokal browser Anda, di chrome saya, saya melihat koma, di chrome mitra saya, saya melihat titik.
— fguen
— Revious
1
Seperti yang baru-baru ini saya temukan, beberapa negara menggunakan koma alih-alih 'titik desimal.
— jbutler483

Jawaban:

28

Saat ini, Firefox menghormati bahasa elemen HTML tempat masukan berada. Misalnya, coba biola ini di Firefox:

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

Anda akan melihat bahwa angka-angka tersebut dalam bahasa Arab, dan koma digunakan sebagai pemisah desimal, seperti halnya dengan bahasa Arab. Ini karena BODYtag tersebut diberi atribut lang="ar-EG".

Selanjutnya, coba yang ini:

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

Yang ini ditampilkan dengan titik sebagai pemisah desimal karena input dibungkus DIVdengan atribut yang diberikan lang="en-US".

Jadi, solusi yang dapat Anda gunakan adalah membungkus input numerik Anda dengan elemen wadah yang diatur untuk menggunakan budaya yang menggunakan titik sebagai pemisah desimal.

— Ashraf Sabry
sumber
3
Menarik! Sayangnya ini sepertinya hanya berfungsi di Firefox, bukan di Chrome (47.0.2526.106)
— luis.ap.uyen
Bahkan tidak di Firefox, di Prancis
— Aubin
8
Firefox menghormati pengaturan bahasa halaman. Chrome memberlakukan pemisah desimal dari OS atau browser? Edge menerapkan titik desimal, terlepas dari pengaturan bahasa halaman atau browser atau OS. Berantakan sekali.
— bbsimonbb
1
Anda tidak membutuhkan elemen pembungkus. Anda dapat mengatur langatribut secara langsung pada elemen masukan.
— Jenny O'Reilly
2
The langAtribut benar-benar membuat perbedaan bagi saya, terima kasih!
— spaark
23

Dengan atribut step yang ditentukan dengan ketepatan desimal yang Anda inginkan, dan atribut lang [yang disetel ke lokal yang memformat desimal dengan titik ], input numerik html5 Anda akan menerima desimal. misalnya. untuk mengambil nilai-nilai seperti 10,56; Maksud saya 2 angka tempat desimal, lakukan ini:

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

Anda selanjutnya dapat menentukan atribut maks untuk nilai maksimum yang diperbolehkan.

Edit Tambahkanatribut lang ke elemen masukan dengan nilai lokal yang memformat desimal dengan titik, bukan koma

— Peter
sumber
28
Ini masih tidak berfungsi :-( Nilai lokal sisi klien selalu mengubah titik desimal menjadi koma desimal, terlepas dari langkah, atau atribut nilai. :-(
— chocolata
12
Seperti yang saya pahami, pertanyaannya bukan tentang memiliki pemisah desimal. Pertanyaannya adalah tentang memiliki '.' daripada ',' ketika lokal klien lebih memilih ','.
— Emanuele Paolini
tidak peduli apa pemisah desimal yang Anda gunakan dalam atribut step - browser akan tetap melokalkannya. Artinya, dengan memberikan contoh Anda - di sebagian besar negara Eropa, angka yang ditampilkan adalah 10,56
— khartvin
1
Saya kembali dan membaca ulang pertanyaan 5 tahun kemudian dan bertanya-tanya mengapa saya memberikan jawaban di atas. Silakan lihat editnya
— Peter
Ini juga tidak akan berfungsi jika data disimpan menggunakan ajax.
— somsgod
7

Gunakan atribut lang pada masukan. Lokal di aplikasi web saya fr_FR, lang = "en_EN" pada nomor masukan dan saya dapat menggunakan tanda koma atau titik. Firefox selalu menampilkan titik, Chrome menampilkan koma. Namun kedua pemisah tersebut valid.

— zian974
sumber
6

Sayangnya, cakupan bidang masukan ini di peramban modern sangat rendah:

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

Oleh karena itu, saya merekomendasikan untuk mengharapkan fallback dan mengandalkan input berat yang dimuat secara terprogram [type = text] untuk melakukan pekerjaan itu, hingga bidang tersebut diterima secara umum.

Sejauh ini, hanya Chrome, Safari, dan Opera yang memiliki implementasi rapi, tetapi semua browser lain bermasalah. Beberapa dari mereka, bahkan tampaknya tidak mendukung desimal (seperti BB10)!

— opalenzuela
sumber
Menggunakan pustaka seperti number.js mungkin membantu mengatasi masalah bawaan dari memiliki banyak bahasa di planet ini.
— pintxo
5

Saya tidak tahu apakah ini membantu tetapi saya tersandung di sini ketika mencari masalah yang sama ini, hanya dari sudut pandang masukan (yaitu saya perhatikan bahwa saya <input type="number" />menerima koma dan titik saat mengetik nilai, tetapi hanya yang terakhir yang terikat ke model angularjs yang saya tetapkan ke input). Jadi saya menyelesaikannya dengan menuliskan petunjuk singkat ini:

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

Kemudian, di html saya, cukup: <input type="number" ng-model="foo" replace-comma />akan mengganti koma dengan titik sambil jalan untuk mencegah pengguna memasukkan nomor yang tidak valid (dari sudut pandang javascript, bukan nomor lokal!). Bersulang.

— Andrea Aloi
sumber
Hai Andrea, adakah cara untuk melakukan ini tanpa Angular JS? Dengan jQuery misalnya?
— chocolata
5
Tentu, saya kira Anda bisa menulis, berdasarkan masukan per nomor, sesuatu seperti $("input[type=number]").on("keydown", function(e) { if(e.keyCode === 188) { this.value += "."; e.preventDefault(); }});(setelah halaman Anda dimuat penuh bersama dengan semua masukan nomor)
— Andrea Aloi
2
Cuplikan ini tidak berfungsi di chrome (diuji dengan v60). Saat mengetik 888,, menyetel valueproperti memunculkan peringatan yang menyatakan bahwa 888.itu bukan angka yang valid (regexp membutuhkan setidaknya satu angka setelah titik) dan mengosongkan bidang. Mengetik titik berhasil, mungkin karena input menganggap nilainya "dalam proses" dan menunggu lebih banyak digit untuk diketik
— svvac
5

Saya menemukan sebuah artikel blog yang sepertinya menjelaskan sesuatu yang berhubungan:
HTML5 input type = number and decimals / floats di Chrome

Singkatnya:

  • yang stepmembantu untuk menentukan domain dari nilai yang valid
  • defaultnya stepadalah1
  • jadi domain default adalah bilangan bulat (antara mindan max, inklusif, jika diberikan)

Saya akan berasumsi bahwa itu bertentangan dengan ambiguitas menggunakan koma sebagai pemisah seribu vs koma sebagai titik desimal, dan Anda 51,983sebenarnya adalah lima puluh satu ribu, sembilan ratus delapan-tiga yang diuraikan secara aneh.

Rupanya Anda dapat menggunakan step="any"untuk memperluas domain ke semua bilangan rasional dalam jangkauan, namun saya belum mencobanya sendiri. Untuk lintang dan bujur saya telah berhasil menggunakan:

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

Mungkin tidak cantik, tapi berhasil.

— Matty K
sumber
Kalau begitu, ada baiknya saya menulis ringkasan dan kemudian mengekstrapolasi, eh?
— Matty K
1

Sejauh yang saya pahami, HTML5 input type="numberselalu kembali input.valuesebagai file string.

Rupanya, input.valueAsNumbermengembalikan nilai saat ini sebagai angka titik mengambang. Anda dapat menggunakan ini untuk mengembalikan nilai yang Anda inginkan.

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

— Jason Gennaro
sumber
Terima kasih, semoga bermanfaat!
— chocolata
Hal yang menyenangkan adalah itu input.valuebenar - benar mengembalikan nomor kanonik dengan titik meskipun itu menunjukkan koma. Jadi menyebalkan tinggal di negara dunia ketiga eropa ...
— Klesun
0

Sudahkah Anda mempertimbangkan untuk menggunakan Javascript untuk ini?

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

— mhrvatin.dll
sumber
Di chrome dengan masukan [type = number] tidak berfungsi .. koma selalu ditampilkan.
— Revious
0

salah satu opsinya adalah javascript parseFloat()... jangan pernah melakukan parse a " text chain" --> 12.3456dengan titik ke int ... 123456(int hapus titik) parsing rantai teks ke FLOAT ...

untuk mengirim koord ini ke server lakukan ini dengan mengirimkan rantai teks. HTTPhanya mengirimTEXT

di klien jangan parsing koord masukan dengan " int", bekerja dengan string teks

jika Anda mencetak kabel di html dengan php atau serupa ... mengambang ke teks dan mencetak dalam html

— Llanis
sumber
0

1) 51.983 adalah nomor jenis string tidak menerima koma

jadi kamu harus mengaturnya sebagai teks

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

ubah dengan .

dan ubah atribut tipe menjadi angka

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

Lihat http://jsfiddle.net/ydf3kxgu/

Semoga ini menyelesaikan Masalah Anda

— Selvin
sumber
Sebenarnya, menyetel tipe sebagai teks memang hampir menjadi satu-satunya solusi untuk membuat titik tetap. Sehubungan dengan pattern="\d+\.\d{2}"saya bahkan akan menyebut UX seperti itu dapat diterima ... Saya akan melepaskan bagian jquery, meskipun ...
— Klesun
0

gunakan polanya

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

semoga berhasil

— Cleber Spirlandeli
sumber
1
Hai, baru saja mengujinya di Chrome 62.0.3202.94 pada Windows 10. Tidak berhasil. Saat menggunakan tombol spinner, input kembali ke koma, bukan titik (dengan mempertimbangkan pengaturan lokal Belgia). Terima kasih.
— chocolata
0

Saya telah menulis kode khusus untuk melakukan ini

Jika Anda ingin mengganti ,dengan ., hapus fungsi translate_decimals sepenuhnya.

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>
Luaskan cuplikan

0

Saya perlu memastikan nilai-nilai masih dapat dimasukkan dengan koma, bukan titik sebagai pemisah desimal. Sepertinya ini masalah yang sudah lama ada. Info latar belakang dapat ditemukan di tautan berikut:

Saya akhirnya menyelesaikannya dengan sedikit jQuery. Mengganti koma dengan titik onChange. Sejauh ini tampaknya ini berfungsi dengan baik di Firefox, Chrome, dan Safari terbaru.

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

  $(this).change(function () {

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

    $(this).val($replace);

  })

});
— leymannx.dll
sumber
-1

Atribut langkah HTML

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

Contoh: jika langkah = "3", angka resmi bisa jadi -3, 0, 3, 6, dll.

 

Tip: Atribut step dapat digunakan bersama dengan atribut max dan min untuk membuat berbagai nilai hukum.

Catatan: Atribut step berfungsi dengan jenis input berikut: number, range, date, datetime, datetime-local, month, time and week.

— Zeeshan Eqbal
sumber
Tapi ... tapi pertanyaannya tentang bilangan desimal, step="3"akan membatasi input hanya bilangan bulat. Dan pengaturan step="0.01"masih menunjukkannya sebagai koma; c
— Klesun
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.