Nasıl html5 input type sayı ile yüzer işlemek için ve ondalık ayırıcılar

SORU

8 Mart 2013, Cuma

Nasıl html5 input type sayı ile yüzer işlemek için ve ondalık ayırıcılar

Bina web ağırlıklı olarak mobil tarayıcılar için sohbet uygulaması. Sayı türü ile giriş alanları kullanarak Im, yani (en) mobil tarayıcılar daha iyi bir kullanıcı deneyimi için tek numara klavye çağırır. Bu web uygulaması esas olarak ondalık ayırıcı ondalık ayırıcısı kolu lazım yani virgül, nokta, olduğu bölgelerde kullanılır.

Nasıl nokta ile ilgili tüm bu karmaşa kapsayacak şekilde ve virgül?

Benim bulgular:

Masaüstü Chrome

İnput type=sayı
Girer "4,55" giriş alanı . kullanıcı
$("#my_input").val(); döner "455"
Giriş doğru değeri alamıyorum

Masaüstü Firefox

İnput type=sayı
Girer "4,55" giriş alanı . kullanıcı
$("#my_input").val(); döner "4,55"
Cok iyi, noktalı virgül yerine ve doğru kaydır alabilirim

Android tarayıcı

İnput type=sayı
Girer "4,55" giriş alanı . kullanıcı
Giriş odağını kaybettiğinde, değer kesilir "4"
Kullanıcı için kafa karıştırıcı

Windows Phone 8

İnput type=sayı
Girer "4,55" giriş alanı . kullanıcı
$("#my_input").val(); döner "4,55"
Cok iyi, noktalı virgül yerine ve doğru kaydır alabilirim

"En iyi uygulamalar kullanıcı kullanabilir durumlarda bu tür bir virgül veya nokta" ondalık ayırıcı ve sayı olarak html input type devam etmek istiyorum, daha iyi bir kullanıcı deneyimi sunmak için?

Ben nokta virgül convert "sinek", önemli olaylar bağlama numarası ile çalışıyor girdiler mi?

EDİT

Herhangi bir çözüm yok, giriş şamandıra value (dize veya sayı olarak) nasıl sayı olan Currenlty. Son kullanıcı "4,55", Krom döner her zaman "455", Firefox verir "4,55" iyi. girerse

Ayrıca girdiğimde Android (4.2 test emülatör), oldukça can sıkıcı bir durum "4,55" başka bir yerde alan ve odağı değiştirmek girişi, girilen sayı için kesildi "4".

CEVAP

21 Mayıs 2013, Salı

1 varsayılan değeri olan step öznitelik için farklı bir değer belirtmek için gerek yukarıdaki cevaplar içinde neyin eksik bence. Eğer giriş doğrulama algoritması kayan nokta değerleri izin vermek istiyorsanız, bir adım buna göre belirtin.

Örneğin, para miktarı olarak istedim, böyle bir adım belirtilen:

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

JQuery değerini almak için kullanarak yanlış bir şey yok, ama yararlı DOM API doğrudan elemanları validity.valid almak için özelliği kullanmak için bulacaksınız.

Ondalık noktası ile benzer bir sorunu vardı, ama bir sorun olduğunu fark ettim nedeni Twitter Bootstrap sayıda geçersiz bir değer ile giriş ekler stil yüzünden oldu.

İşte bir keman step öznitelik ekleyerek iyi yapan, gösteren ve akım değeri geçerli olup olmadığını da test:

jsFiddle

TL;DR:Bir Set step 1 varsayılan olduğundan, bir kayan nokta değeri için öznitelik.

NOT: Virgül benim için doğrulamak için yeterli değildir, ama eğer ondalık ayırıcısı olarak virgül kullanan bir yerlerde bölge ayarları/OS dilimde kurdum, işe yarayacağını düşünüyorum.

Bunu Paylaş: