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/

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.

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

Menurut spesifikasi , Anda dapat menggunakan anysebagai nilai stepatribut:

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

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.

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

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.

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.

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

Sudahkah Anda mempertimbangkan untuk menggunakan Javascript untuk ini?

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

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

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

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

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>

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:

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

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

  })

});

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.