Pokaż klawiaturę numeryczną w iPhone przy użyciu tekstu wejściowego

Question

Zauważ, że używając input type="number" można wyświetlić klawiaturę numeryczną, jak poniżej:

Czy jest możliwe aby użyć input type="text" wyświetlać tę samą klawiaturę numeryczną? I do nie chcę wyświetlać klawiatury numerycznej przy użyciu pattern="\d*", ponieważ możliwe jest, że wartość będzie zawierała miejsce dziesiętne.

Powodem, dla którego chciałbym użyć input type="text" zamiast input type="number" jest to, że nie mogę odzyskać tej wartości, jeśli wprowadzę liczbę inną niż liczba dla pola liczbowego. Na przykład, jeśli wprowadzę ABC, zostanie ona automatycznie opróżniona. Wydaje mi się, że korzystanie z input type="text" będzie łatwiejsze dla tego rodzaju kontroli.

Answer 1

Nie mogłem znaleźć żadnego rozwiązania dla tego od teraz.

Ale jedną z możliwych sztuczek, które możesz zrobić, to użyj type = "number" i zmień go w javascript za pomocą document.getElementById ("element"). Type = "text";

ale jednak byłoby to również wyczyścić ABC ale byłoby przyjąć numery przecinki i dziesiętnych

Answer 2

Istnieją inne rodzaje, które może wyświetlić klawiaturę numeryczną.

Z typem = "liczba" nie można nic zrobić. Nie zaakceptuje niczego oprócz liczb. Ale jeśli użyjesz type = "tel", jest to brzydki hack, ale działa.

Oto mój przykład kod pocztowy:

<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6"> 

Nie będzie jednak problem „-” klucz na niektórych klawiaturach ekranowych, można obejść ten problem z dodaniem kreskę po określoną liczbę znaków w JavaScript tak:

// Zip Code dashes 
$('input[type="tel"].zipCode').keyup(function(event) { 
    var t = event.target, v = t.value; 
    if (v.length == 2) { t.value = v + '-'; } 
}); 

(Proszę wybaczyć jQuery). Zamiast używać type = "tel" możesz użyć właściwości type = "text" i pattern, ale jeszcze jej nie testowałem. Najprawdopodobniej nie będzie działać z większością przeglądarek.

Answer 3

Jeśli twoje wejście jest liczbą rzeczywistą, całkowitą lub dziesiętną, użyj wejścia HTML5 type="number". Spowoduje to wyświetlenie poprawnej klawiatury na urządzeniach z Androidem (również na telefonie z systemem Windows).

Następnie należy umieścić pattern="[0-9]*" na tym atrybucie, aby wymusić specjalną klawiaturę numeryczną na iOS. Należy pamiętać, że:

1. To nie oznaczy po przecinku lub minusa za nieważne, ponieważ atrybut wzór jest właściwie nie ważne na type = „number” pola! i
2. To jest TYLKO sposób na klawiaturę numeryczną iOS. Zobacz różnicę między sekcją liczbową klawiatury alfa (jak na powyższym zrzucie ekranu) w porównaniu z prawdziwą klawiaturą numeryczną.

ostatnia uwaga, należy pamiętać, aby nie używać pola numer typu dla wejść, które nie są prawdziwe numery (np. Zipcodes z wiodącymi zerami lub kodów produktów z przecinkami lub spacjami). Numeryczne pole wejściowe NIE MOŻE PODAĆ wartości, które nie są liczbami rzeczywistymi! (w zależności od przeglądarki/urządzenia)

Answer 4

Wypróbuj to obejście. Pracował dla mnie.

Zmieni typ na numer, a następnie powróci do tekstu. To zmusi ios do przełączenia na klawisze numeryczne przy pierwszej zmianie podpory. Urządzenie setSelectionRange służy do wyboru wartości wejściowej.

$(function(){ 

    $("input[type='text']").on('mouseup', function(e){ 
     e.preventDefault(); 
    }); 

    $("input[type='text']").on('focus click', function(e){ 
     $(this).prop('type', 'number'); 
     var obj = $(this); 
     setTimeout(function(){ 
      obj.prop('type', 'text'); 
      document.getElementById(obj.attr('id')).setSelectionRange(0, 9999); 
     }, 50);  
    }); 
}); 

Answer 5

użyć tego kodu:

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