Bazı tarayıcıların input type="number"sayıların gösterimini yerelleştirdiğini gördüm .

Şimdi, uygulamamın enlem ve boylam koordinatlarını görüntülediği alanlarda, "51,983" gibi "51,982559" olması gereken şeyler alıyorum. Çözümüm input type="text"bunun yerine kullanmaktır , ancak sayı girişini ondalık sayıların doğru görüntülenmesiyle kullanmak istiyorum.

İstemci tarafındaki yerel ayarlardan bağımsız olarak tarayıcıları sayı girişinde ondalık nokta kullanmaya zorlamanın bir yolu var mı ?

(Uygulamamda bunu sunucu tarafında yine de düzelttiğimi söylemeye gerek yok, ancak kurulumumda istemci tarafında da doğru olmasına ihtiyacım var (bazı JavaScript nedeniyle).

Şimdiden teşekkürler.

GÜNCELLEME Şu an itibariyle, Windows 7'de Chrome Sürüm 28.0.1500.71 m kontrol edildiğinde, sayı girişi virgülle biçimlendirilmiş ondalık sayıları kabul etmiyor. Bustepniteliğesahip önerilen önerilerişe yaramıyor gibi görünüyor.

http://jsfiddle.net/AsJsj/

Şu anda Firefox, girdinin bulunduğu HTML öğesinin dilini kabul ediyor. Örneğin, Firefox'ta şu keman yapmayı deneyin:

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

Sayıların Arapça olduğunu ve ondalık ayırıcı olarak virgülün Arapçada olduğu gibi kullanıldığını göreceksiniz. Bunun nedeni, BODYetikete öznitelik verilmesidir lang="ar-EG".

Sonra, şunu deneyin:

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

Bu, ondalık ayırıcı olarak bir nokta ile görüntülenir, çünkü girdi DIVbelirli bir özniteliğe sarılmıştır.lang="en-US" .

Dolayısıyla, başvurabileceğiniz bir çözüm, sayısal girdilerinizi ondalık ayırıcı olarak noktaları kullanan bir kültürü kullanmak üzere ayarlanmış bir kap öğesiyle sarmalamaktır.

İle adım İstediğiniz ondalık hassasiyeti bir özelliğine de ve lang [ile formatları ondalık sayılar o bir yerel olarak ayarlandığında özniteliği dönemi , senin html5 sayısal giriş ondalık sayılar kabul eder]. Örneğin. 10.56 gibi değerler almak için; 2 ondalık basamak sayısını kastediyorum, şunu yapın:

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

İzin verilen maksimum değer için maksimum özniteliği de belirtebilirsiniz .

Düzenle Ondalık sayıları virgül yerine nokta ile biçimlendiren bir yerel değer ile giriş öğesine bir lang niteliğiekleyin

Spesifikasyona göre any, stepöznitelik değeri olarak kullanabilirsiniz :

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

Girişte lang niteliğini kullanın. Web uygulamamdaki yerel ayar fr_FR, lang = "en_EN" giriş numarasında ve kayıtsız olarak virgül veya nokta kullanabilirim. Firefox her zaman bir nokta, Chrome ise virgül gösterir. Ancak her iki ayırıcı da geçerlidir.

Ne yazık ki, modern tarayıcılarda bu giriş alanının kapsamı çok düşük:

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

Bu nedenle, alan genel olarak kabul edilene kadar, geri dönüşü beklemenizi ve işi yapmak için programatik olarak yüklü bir girdiye [tür = metin] güvenmenizi öneririm.

Şimdiye kadar sadece Chrome, Safari ve Opera'nın düzgün bir uygulaması var, ancak diğer tüm tarayıcılar hatalı. Bazıları ondalık sayıları desteklemiyor gibi görünüyor (BB10 gibi)!

Bunun yardımcı olup olmadığını bilmiyorum ama aynı sorunu ararken burada tökezledim, yalnızca giriş açısından bakıldığında (yani <input type="number" />değeri yazarken hem virgül hem de noktayı kabul ettiğimi fark ettim , ancak yalnızca ikincisi girdiye atadığım angularjs modeline bağlı olarak). Ben de bu hızlı yönergeyi not ederek çözdüm:

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

Daha sonra, html'mde basitçe: <input type="number" ng-model="foo" replace-comma />kullanıcıların geçersiz sayılar (javascript açısından değil, yerel olarak değil!) Girmesini önlemek için virgülleri anında noktalarla değiştirecek. Şerefe.

İlgili bir şeyi açıklayan bir blog makalesi buldum:
HTML5 input type = sayı ve ondalık sayılar / Chrome'da kayan sayılar

Özetle:

• stepGeçerli değerlerin etki alanını tanımlamak için yardımcı olur
• varsayılan stepolduğunu1
• bu nedenle varsayılan alan tamsayılardır ( verilmişse minve arasında max, dahil)

Binlik ayırıcı olarak virgül ve ondalık nokta olarak virgül kullanmanın belirsizliği ile karıştırıldığını varsayabilirim. 51,983 aslında garip bir şekilde ayrıştırılmış elli bir bin dokuz yüz sekiz üç.

Görünüşe göre step="any"etki alanını aralıktaki tüm rasyonel sayılara genişletmek için kullanabilirsiniz , ancak ben kendim denemedim. Enlem ve boylam için başarıyla kullandım:

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

Güzel olmayabilir ama işe yarıyor.

Anladığım kadarıyla, HTML5 input type="numberher zaman input.valuebir string.

Görünüşe göre, input.valueAsNumbergeçerli değeri bir kayan nokta sayısı olarak döndürür. İstediğiniz bir değeri döndürmek için bunu kullanabilirsiniz.

Bkz. Http://diveintohtml5.info/forms.html#type-number

Bunun için Javascript kullanmayı düşündünüz mü?

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

seçeneklerden biri javascript parseFloat()... asla a "öğesini text chain" --> 12.3456int işaretiyle ayrıştırma ...123456 (int noktayı kaldır) bir metin zincirini bir FLOAT'a ayrıştırma ...

bu koordinatları bir sunucuya göndermek için bunu bir metin zinciri göndererek yapın. HTTPsadece gönderirTEXT

istemcide giriş koordinatlarını "int " , metin dizeleriyle çalışın

html'deki kordonları php veya benzeri ile yazdırırsanız ... float metne ve html'de yazdırın

1) 51.983 bir dize türü numarası virgül kabul etmez

bu yüzden metin olarak ayarlamalısın

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

ile değiştirin .

ve tür özniteliğini sayı olarak değiştirin

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

Http://jsfiddle.net/ydf3kxgu/ adresine göz atın

Umarız bu sorununuzu çözer

kalıbı kullan

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

iyi şanslar

Bunu yapmak için özel bir kod parçası yazdım

Eğer değiştirmek istiyorsanız ,ile ., remove translate_decimals tamamen işlevlerini.

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>

Değerlerin ondalık ayırıcı olarak nokta yerine virgülle girilebilmesini sağlamam gerekiyordu. Bu çok eski bir sorun gibi görünüyor. Arka plan bilgisi şu bağlantılarda bulunabilir:

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

Sonunda biraz jQuery ile çözdüm. Virgüllerin Değiştirilen noktalarla değiştirilmesi. Bu, en son Firefox, Chrome ve Safari'de şu ana kadar iyi çalışıyor gibi görünüyor.

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

  $(this).change(function () {

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

    $(this).val($replace);

  })

});

HTML adım Özelliği

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

Örnek: adım = "3" ise, yasal sayılar -3, 0, 3, 6 vb. Olabilir.

İpucu: Step özelliği, bir dizi yasal değer oluşturmak için max ve min özellikleriyle birlikte kullanılabilir.

Not: Adım özelliği şu giriş türleriyle çalışır: sayı, aralık, tarih, tarih saat, tarih saat-yerel, ay, saat ve hafta.