Wyświetl numer na urządzeniach mobilnych bez <input type = "number"> - jquery, html, html5, mobile, webkit

Tworzę stronę internetową, która ma pola wprowadzania, które powinny umożliwiać wprowadzenie takiego ciągu: „1-2 * 3 + 4”. Chcę również wyświetlić klawiaturę numpad na urządzenia mobilne.

<input type="number">

Nie działa, ponieważ przeglądarki webkit unieważniają powyższy przykład (ponieważ zawiera znaki). Czy są jakieś alternatywy dla wywołania NumPada inne niż powyższe? (type = „tel” nie zawiera znaku -)

EDYTOWAĆ: Więc znalazłem obejście:

$(".myInput").focus(function(){
$(this).get(0).type = "text";
});
$(".myInput").blur(function(){
$(this).get(0).type = "number";
});

Kiedy dane wejściowe zostaną zogniskowane, zmieniam typ natekst (przynajmniej na iPhonie ta zmiana następuje po tym, jak numpad jest już podniesiony). Kiedy traci fokus, zmieniam typ z powrotem na numer, aby działał ponownie, jeśli sygnał wejściowy zostanie ponownie fokusowany.

Nadal interesują mnie inne sugestie.

Odpowiedzi:

Obawiam się, że utknąłeś z klawiaturą numeryczną lub klawiaturą numeryczną z dodatkowymi klawiszami (które zawierają minus, ale nie plus, niestety).

Aby osiągnąć tylko numpad:

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

Aby uzyskać rozszerzoną klawiaturę numeryczną:

<input type="number" pattern="*" />

Przeczytaj więcej na ten temat w Apple Safari Developer Library.