HTML5: yalnızca tamsayılar alan sayı girdi türü?

253

JQuery üzerinden HTML5 doğrulamaları uygulayan jQuery Tools Validator kullanıyorum . Bir şey dışında şimdiye kadar harika çalışıyor. HTML5 belirtiminde, "number" girdi türü hem tamsayılara hem de kayan nokta sayılarına sahip olabilir. Bu, veritabanı alanlarınız kayan nokta sayıları imzalandığında yararlı bir doğrulayıcı olacağından inanılmaz derecede kısa görüşlü gibi görünüyor (işaretsiz girişler için "desen" doğrulamasına geri dönmeniz ve böylece yukarı ve aşağı gibi ekstra özellikleri kaybetmeniz gerekecek destekleyen tarayıcılar için oklar). Başka bir girdi türü veya girdiyi yalnızca imzasız tamsayılarla sınırlandıracak bir özellik var mı? Hiç bulamadım, teşekkürler.

DÜZENLE

Tamam, çocuklar, zaman ayırdığınız ve yardım ettiğiniz için teşekkür ederim, ancak hak edilmemiş birçok oy kullanmanın devam ettiğini görüyorum: D. Adımın 1 olarak ayarlanması, girişi kısıtlamadığından yanıt değildir. Metin kutusuna yine de negatif kayan nokta sayısı yazabilirsiniz. Ayrıca, kalıp doğrulamasının farkındayım (orijinal yazımda bahsetmiştim), ancak bu sorunun bir parçası değildi. HTML5, "sayı" türünde bir girdiyi pozitif tamsayı değerlerle kısıtlamaya izin verip vermediğini bilmek istedim. Bu sorunun cevabı, öyle görünüyor ki, "hayır, öyle değil" olacaktır. Bu, jQuery Tools doğrulama kullanırken bazı dezavantajlara neden olduğu için desen doğrulama kullanmak istemedim, ancak şimdi şartname bunu yapmak için daha temiz bir yol izin vermiyor gibi görünüyor.

— JayPea
kaynak

3

2019 itibariyle — ne zamandan beri bilmiyorum — numbergirdi (en azından FF / Chrome / Safari'de) artık ondalık değerlere izin veren attr için açık bir değer ayarlamadığınız sürece varsayılan olarak yalnızca tam sayıları kabul eder step; örneğin: step="0.01". MDN burada belgelenmiştir . Bu konuda iki zihinde mantıklı bir varsayılan olduğunu düşünüyorum, ama aynı zamanda kırıcı bir değişiklik (evet, yazdığım bazı kodu etkiledi).

— Darragh Enright

326

https://www.w3.org/wiki/HTML/Elements/input/number

Yalnızca HTML ile elde edebileceğiniz en iyisi

<input type="number" min="0" step="1"/>

Snippet'i genişlet

— Aurélien Ooms
kaynak

6

Muhtemelen belirlesin miniçin 1o pozitif sayılar (ve negatif olmayan sayılar değil) istediği gibi.

— Martin Thoma

1

@pwdst Ben ikinci olurum. <input type="number" min="0" step="1"/>sorunun en doğru cevabıdır. Neyse, her iki sahip olmanın ne anlamı var step="1"ve pattern="\d+"? Her iki durumda da kayan nokta sayılarını yazamıyorum.

— Danimarka Ashfaq

27

Bu benim için kromun en son sürümünde işe yaramadı. Harflerin yazılmasına izin vermez, ancak özel karakterlerin eklenmesine izin verir.

— Malavos

3

Ben de e yazabilirsiniz Neden

— hibe güneşe

4

üstel sayılar için @grantsun, örneğin 10e20.

— sn3ll

181

stepÖzelliği şu şekilde ayarlayın 1:

<input type="number" step="1" />

Bu şu anda Chrome'da biraz hatalı görünüyor, bu yüzden şu anda en iyi çözüm olmayabilir.

Daha iyi bir çözüm, patterngirdiyi eşleştirmek için normal bir ifade kullanan özniteliği kullanmaktır :

<input type="text" pattern="\d*" />

\dbir sayının normal ifadesidir, *birden fazla kabul ettiği anlamına gelir. İşte demo: http://jsfiddle.net/b8NrE/1/

— js-kodlayıcı
kaynak

2

JayPea'nın öğrendiği gibi, tüm tarayıcılar henüz tüm HTML5 öğelerini desteklememektedir, bu nedenle önerdiğiniz gibi zarif bir bozulma sağlamak en iyisidir.

— DOK

6

@Zut HTML5 doğrulaması bu anahtarları girmenizi engellemez. Formun bu karakterlerle gönderilmesini engeller. numberBaşka karakterler içeren türde bir giriş içeren bir form gönderirseniz Chrome size bir hata mesajı gösterir.

— js-coder

2

@dotweb - Ne demek istediğini anlıyorum. İkisi arasındaki fark, number özniteliğiyle, giriş için seçimi kaldırdığımda (tetik bulanıklığı) tüm alfabetik karakterlerin otomatik olarak kaldırılmasıdır. Desen özniteliği kullanılırken bu gerçekleşmez. Sanırım bu ayrım sadece verilerinizi göndermek için AJAX kullanıyorsanız submitve yayını tetiklemek dışında başka bir etkinlik kullanıyorsanız önemlidir .

— Zut

6

Bu OP'nin istediği şeyi yapmaz. Sadece tamsayılar /\d*/.test(1.1) // true

— vsync

2

@vsync pattern="\d*"aynı değildir /\d*/, pattern="\d*"eşittir /^(?:\d*)$/, bakınız HTML5 desen nitelik belgeleri .

— Wiktor Stribiżew

37

<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

Bu kodu kullanarak, metin alanına giriş yalnızca rakam girmek için sınırlar. Kalıp, HTML 5'te bulunan yeni özelliktir.

Desen özniteliği doc

— thejustv
kaynak

9

Göre şartname model niteliği giriş türüdür yalnızca kullanılabilir Metin, Arama, URL, Telefon, ( "Metin" türündeki burada gösterildiği gibi) e-posta, Şifre. Bu, sayı giriş türünün semantiğinin ve bu nedenle (önemli olarak) bazı tabletlerin ve telefonların sayısal ekran klavyelerinin bu yöntem kullanıldığında kaybedildiği anlamına gelir.

— pwdst

3

Firefox 36.0'daki bu, harfleri ve özel karakterleri yazmanıza izin verir.

— Malavos

1

Girişi yalnızca sayılarla sınırlamaz, yine de harf yazabilirsiniz!

— HadidAli

35

JavaScript kullanmanın kolay yolu:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >

— Tarek Kalaji
kaynak

Anlamıyorumreplace(/(\..*)\./g, '$1')

— codyc4321 28:17

3

Bu, kayan sayıları kabul etmek ve .sadece bir kez tekrarlamak önemlidir , örneğin 123.556yazılabilir.

— Tarek Kalaji

8

@TarekKalaji - sorular tamsayılar ve float numaraları

— vsync

mobil cihaz hakkında nasıl? çünkü metin türü tüm klavyeleri görüntüler (alfanümerik karakterler de)

— Nuri YILMAZ

27

Desen güzel ancak girdiyi yalnızca type = "text" ile sayılarla sınırlamak istiyorsanız, oninput ve regex komutlarını aşağıdaki gibi kullanabilirsiniz:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

Benim için giyerim :)

— Viktor Karpyuk
kaynak

Bu yaklaşımın (değiştirme) yönteminizi (olay işleyici) olumsuz etkileyebileceğine ve giriş kutusundaki varsayılan değerinizi silebileceğine dikkat edin.

— HadidAli

14

Bu sadece html5 için değil tüm tarayıcı iyi çalışıyor. bunu dene

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"

— Leopar
kaynak

12

Bu kötü. Girişte şunu deneyin: Shift + Home, Shift + End, Ctrl + A, Ctrl + C, Ctrl + V. oninputBunun yerine kullanın

— zanderwar

1

Bu cevap yazıldığında HTML5 yayınlanmadı. @zanderwar

— Muhammet Can TONBUL

11

Desen kısıtlama için her zaman tercih edilir, yalnızca 1'den sonraki sayıları girmek için 1'i deneyin oninputve mingerçekleşin

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >

— Noothan yv
kaynak

Çok rahatsız edici bir çözüm. "Değer = $ {var}" ne demektir?

— Geliştirici

@AcademyofProgrammer bu giriş için varsayılan değer örneği

— Shinigamae

en iyi cevap! yapıştırma için çalışır, IE'de bile (10+) çalışır, girişin türü aracılığıyla herhangi bir klavyeyi görüntüleme özgürlüğü verir ve kromun bu sinir bozucu yukarı / aşağı oklarını alanın içinde görüntülemesini sağlamaz.

— Janosch

6

stepözelliği şu şekilde 1 olarak ayarlamayı denediniz mi

<input type="number" step="1" />

— DevTeamExpress
kaynak

4

Sadece giriş alanınıza koyun: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

— illeas
kaynak

4

Belki her kullanım durumuna uymaz, ama

<input type="range" min="0" max="10" />

iyi bir iş yapabilir: keman .

Dokümanları kontrol edin .

— Luca Fagioli
kaynak

3

Evet, HTML5 yapar. Bu kodu deneyin ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

Min. Ve maks. Parimetreyi görüyor musunuz? Chrome 19 (çalıştı) ve Firefox 12 (işe yaramadı) kullanarak denedim.

— wilsonfoz
kaynak

Bu, bilinen bir aralık istediğinizi varsayar. Ancak herhangi bir tamsayı değeri istiyorsanız, bu yine de işe yarar mı ?

— RandomHandle

3

Oh Chrome çalışıyordum ve html özniteliklerini kullanmama rağmen bazı sorunlar yaşadım. Bu js kodu ile sona erdi

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});

— a.valchev
kaynak

Ben de bu 1 küçük tweak kullanarak sona erdi; ParseInt (value) öğesini parseInt (value.replace ('.', '') Olarak değiştirdim.Bu, 1.56 yapıştırmamı ve görüntülenen değeri

— 156'da tutmamı sağladı

3

Ayarlayın step="any". İyi çalışıyor. Referans: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

— udit mittal
kaynak

3

stepÖzelliği herhangi bir kayan nokta numarasına ayarlayın , örneğin 0.01 ve hazırsınız.

— Mantas K.
kaynak

2

Teknik özelliklerden

step="any"veya pozitif kayan nokta sayısı
Öğenin değerinin değer ayrıntı düzeyini belirtir.

Böylece basitçe şu şekilde ayarlayabilirsiniz 1:

— David Hedlund
kaynak

9

Bunu denedim ama sorun hala metin kutusuna kayan nokta sayısı yazabilirsiniz.

— JayPea

Yani, kullanıcının ondalık nokta yazmasını engelleyen koda ihtiyacınız var mı?

— Blazemonger

1

var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});

— Sarthak
kaynak

0

Şu anda, bir kullanıcının yalnızca HTML ile girişinize ondalık değerler yazmasını engellemek mümkün değildir. Javascript kullanmalısınız.

— Michal
kaynak

0

<input type="number" oninput="this.value = Math.round(this.value);"/>

Snippet'i genişlet

— R. Yaghoobi
kaynak

-2

Future ™ 'de (bkz. Kullanabilir miyim ), size bir klavye sunan kullanıcı aracılarında, bir metin girişini yalnızca sayısal tuşlarla kısıtlayabilirsiniz input[inputmode].

— weston
kaynak

inputmodeçoğunlukla elde taşınan cihazlar içindir ve doğru klavye düzenini tetikler, ancak klavyeli "normal" bilgisayarlar için, istediğiniz her şeyi girmenizi engellemez.

— vsync