Telefon: metin girişi için sayısal klavye

Sayı klavyesini telefonda görünmeye zorlamanın bir yolu var mı <input type="text">? <input type="number">HTML5'te "kayan noktalı sayılar" için olduğunu fark ettim , bu yüzden kredi kartı numaraları, posta kodları vb. İçin uygun değil.

<input type="number">Kayan nokta sayıları dışında sayısal değerler alan girişler için sayısal klavye işlevini taklit etmek istiyorum . Belki de inputbunu yapan uygun başka bir tür var mı?

Yapabilirsin <input type="text" pattern="\d*">. Bu, sayısal klavyenin görünmesine neden olur.

Daha fazla ayrıntı için buraya bakın: iOS için Metin, Web ve Düzenleme Programlama Kılavuzu

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

2015'in ortalarından itibaren bunun en iyi çözüm olduğuna inanıyorum:

<input type="number" pattern="[0-9]*" inputmode="numeric">

Bu, hem Android hem de iOS'ta sayısal tuş takımını verecektir:

Ayrıca, yukarı / aşağı ok düğmeleri ve klavye dostu yukarı / aşağı ok tuşu artışlarıyla beklenen masaüstü davranışını verir:

Bu kod snippet'inde deneyin:

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

Hem birleştirerek type="number"ve pattern="[0-9]*biz her yerde çalışır bir çözüm olsun. Ve gelecekteki HTML 5.1 önerilen inputmodeözellik ile ileri uyumlu .

Not: Bir desen kullanmak tarayıcının yerel form doğrulamasını tetikler. novalidateÖzniteliği kullanarak bunu devre dışı bırakabilir veya titleözniteliği kullanarak başarısız bir doğrulama için hata mesajını özelleştirebilirsiniz .

Baştaki sıfırları, virgülleri veya harfleri (örneğin, uluslararası posta kodlarını) girebilmeniz gerekiyorsa, bu küçük değişkeni inceleyin .

Krediler ve ek okumalar:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios- Sayısal tuş takımı/

En azından "parola" benzeri alanlar için, <input type="tel" />en otantik sayı odaklı alanı üretiyor ve aynı zamanda otomatik biçimlendirme yapmanın faydası olmadığını buldum . Örneğin, son zamanlarda Hilton için geliştirdiğim bir mobil uygulamada, bununla devam ettim:

... ve müvekkilim çok etkilendi.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

Kullanılması type="email"veya type="url"size iPhone gibi en azından bazı telefonlarda, bir klavyeyi verecektir. Telefon numaraları için kullanabilirsiniz type="tel".

<input type="text" pattern="\d*">Sayısal klavyeyi açmak için tuşunu kullanma tehlikesi vardır . Firefox ve chrome'da, desen içinde bulunan normal ifade, tarayıcının söz konusu ifadeye girişi doğrulamasına neden olur. kalıpla eşleşmezse veya boş bırakılırsa hatalar oluşur. Diğer tarayıcılardaki istenmeyen eylemlerin farkında olun.

<input type="text" inputmode="numeric">

Inputmode ile tarayıcıya bir ipucu verebilirsiniz.

type="number"Semantik web sayfası için en iyisi olduğunu düşünüyorum . Sadece klavyeyi değiştirmek istiyorsanız, kullanabileceğiniz type="number"veya type="tel". Her iki durumda da, iPhone kullanıcı girişini kısıtlamaz. Kullanıcı istediği karakterleri yazabilir (veya yapıştırabilir). Tek değişiklik kullanıcıya gösterilen klavyedir. Bunun ötesinde herhangi bir kısıtlama istiyorsanız, JavaScript kullanmanız gerekir.

Benim için en iyi çözüm:

Android ve iphone'da 0-9 pad'i getiren tamsayılar için

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

Firefox / chrome / safari'deki iplikçikleri gizlemek için bunu yapmak isteyebilirsiniz, çoğu müşteri çirkin göründüklerini düşünüyor

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }

Ve özel doğrulama yapıyorsanız form öğenize novalidate = 'novalidate' ekleyin

Ps aslında sonuçta kayan nokta sayıları istemeniz durumunda, istediğiniz hassaslığa adım atın '.' android'e

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />

2018 yılında:

<input type="number" pattern="\d*">

hem Android hem de iOS için çalışıyor.

Android (^ 4.2) ve iOS'ta (11.3) test ettim

Bu şekilde deneyebilirsiniz:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

Ancak dikkatli olun: Girdinizde sayı dışında bir şey varsa, sunucuya iletilmez.

Her durumda benim için en iyi çalışan bir tür bulamadım: Sayısal giriş (örneğin "7.5" girişi) varsayılan olarak gerekiyordu, ancak belirli zamanlarda metne izin vermeliyim (örneğin "pass"). Kullanıcılar sayısal bir tuş takımı istediler (örneğin 7.5 girişi), ancak arada sırada metin girişi gerekiyordu (örneğin "pass").

Bunun yerine, forma bir onay kutusu eklemek ve kullanıcının benim giriş (id = "inputSresult") tip = "sayı" ve tip = "metin" arasında geçiş yapmasına izin vermek oldu.

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

Sonra, yukarıdaki onay kutusunun işaretli olup olmadığına bağlı olarak, türü metin ve sayı arasında değiştiren onay kutusuna bir tıklama işleyicisi bağladım:

$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});

Bu bizim için iyi sonuç verdi.

 <input type="text" inputmode="decimal">

sayısal tuş takımını kullanarak metin girişi verecektir

inputmodeHtml özelliğini kullanabilirsiniz :

<input type="text" inputmode="numeric" />

Daha fazla ayrıntı için, giriş modunda MDN belgesine bakın .

bunu dene:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

bakın: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask