So erzwingen Sie die Tastatur mit Zahlen auf der mobilen Website in Android

90

Ich habe eine mobile Website und sie enthält einige HTML- inputElemente wie diese:

<input type="text" name="txtAccessoryCost" size="6" />

Ich habe die Seite in einen WebViewmöglichen Android 2.1-Verbrauch eingebettet , so dass es sich auch um eine Android-Anwendung handelt.

Ist es möglich, die Tastatur mit Zahlen anstelle der Standardtastatur mit Buchstaben zu erhalten, wenn dieses HTML- inputElement fokussiert ist?

Oder ist es möglich, es für die gesamte Anwendung festzulegen (möglicherweise etwas in der Manifest-Datei ), wenn es für ein HTML-Element nicht möglich ist?

ncakmak
quelle
Wenn Sie zusätzlich zu Android ein numerisches Tastenfeld für iOS benötigen, sollten Sie dies tun: stackoverflow.com/a/31619311/806956
Aaron Gray
2
Das inputmode="number"Attribut scheint die richtige Antwort Ende 2019 zu sein: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… . Die Antwort mit der höchsten Stimmenzahl zum Zeitpunkt dieses Kommentars legt nahe type="number", was einige seiner eigenen Fallstricke mit sich bringt. inputmodescheint nur die Anzeige der virtuellen Tastatur zu beeinflussen und nicht das Verhalten / die Einschränkungen der Eingabe selbst.
SheffDoinWork

Antworten:

111
<input type="number" />
<input type="tel" />

Beide zeigen den Ziffernblock an, wenn der Eingang den Fokus erhält.

<input type="search" /> zeigt eine normale Tastatur mit einer zusätzlichen Suchtaste

Alles andere scheint die Standardtastatur aufzurufen.

Richard Kernahan
quelle
Werde es dir heute ansehen und dich dann wissen lassen, ob das funktionieren würde. Danke, Richard!
Ncakmak
1
Hallo Richard. Keine funktioniert, Eingabefeld öffnet immer noch die Standardtastatur.
Ncakmak
1
Die Liste der input types der HTML-Spezifikation , einschließlich numberund tel.
Rory O'Kane
1
Beachten Sie, dass die Tastatur für type="tel"das Eingeben von Zahlen schlechter ist als die Tastatur für type="number".
Rory O'Kane
2
<input type="text" pattern="\d*" /> ruft auch die numerische Tastatur auf, aber nur unter iOS, nicht unter Android .
Rory O'Kane
50

WICHTIGE NOTIZ

Ich poste dies als Antwort, nicht als Kommentar, da es sich um ziemlich wichtige Informationen handelt und es in diesem Format mehr Aufmerksamkeit erregen wird.

Wie andere Kollegen gezeigt haben, können Sie ein Gerät zwingen, Ihnen eine numerische Tastatur mit type="number"/ anzuzeigen type="tel", aber ich muss betonen, dass Sie dabei äußerst vorsichtig sein müssen.

Wenn jemand eine Zahl erwartet, die mit Nullen beginnt, wie z. B. 000222, hat er wahrscheinlich Probleme, da einige Browser (z. B. Desktop-Chrome) an den Server senden 222, was nicht das ist, was sie will.

Über type="tel"Ich kann nichts Ähnliches sagen, aber ich persönlich benutze es nicht, da sein Verhalten auf verschiedenen Telefonen variieren kann. Ich habe mich auf die einfachen beschränkt, die pattern="[0-9]*"in Android nicht funktionieren

user907860
quelle
4
Die automatische Neuformatierung findet bei wahrscheinlich nicht statt type="tel". In der Spezifikation wird darauf hingewiesen, dass telim Gegensatz zu einer bestimmten Syntax keine bestimmte Syntax erzwungen numberwird. Der Wert muss eine gültige Gleitkommazahl sein .
Rory O'Kane
Wie schlimm ist es? Wir versuchen, den Formularprozess für unsere mobilen Kunden zu beschleunigen, und dies scheint eine offensichtliche Lösung zu sein, aber wir möchten auch etwas Zuverlässiges. Sie haben eine starke Warnung vor der Verwendung dieser Methode veröffentlicht. Ich frage mich, ob Sie das etwas näher erläutern könnten.
Philll_t
@Philll_t, ein Benutzer muss '000222'-Daten senden, aber Sie auf der Serverseite erhalten stattdessen' 222 '. Sehen Sie nicht, dass die Funktionalität völlig kaputt ist? Der Server erhält falsche Daten.
user907860
Ja, ich verstehe, was Sie meinen, aber ich sage Folgendes: Wie viel Prozent der Benutzer sehen dies? Ist dies ein Problem bei großen mobilen Browsern wie Safari und Chrome? Woher wissen Sie, dass dies ein Problem ist? Gibt es einen Link, den Sie bereitstellen können? Ich glaube dir, ich möchte nur selbst recherchieren und habe nichts gesehen, was darauf hindeutet. Vielleicht kannst du mir die richtige Richtung weisen. Wir versuchen nur zu sehen, ob unser Kundenstamm davon nicht profitiert.
Philll_t
1
@Philll_t Ich denke, das beste Beispiel für diese Warnung sind die Eingabefelder für das Geburtsdatum. Hier müssen Sie Tag, Monat und Jahr manuell eingeben. Und ja, es gibt immer noch viele Websites, die diesen Stil anstelle der häufig verwendeten Datumsauswahl verwenden. In Bezug auf das Problem in den Eingabefeldern für das Geburtsdatum ist, wenn Sie Ihren Tag oder Monat beginnend mit "0"
eingeben
8

Das sollte funktionieren. Aber ich habe die gleichen Probleme auf einem Android-Handy.

<input type="number" /> <input type="tel" />

Ich fand heraus, dass, wenn ich das Jquerymobile-Framework nicht einbezog, die Tastatur auf den beiden Feldtypen korrekt angezeigt wurde.

Aber ich habe keine Lösung gefunden, um dieses Problem zu lösen, wenn Sie wirklich Jquerymobile verwenden müssen.

UPDATE: Ich habe herausgefunden, dass, wenn das Formular-Tag aus dem gespeichert ist

<div data-role="page"> 

Die Zifferntastatur wird nicht angezeigt. Das muss ein Fehler sein ...

Jesper Grann Laursen
quelle
Vielen Dank, dass Sie sich damit befasst haben. Ich bin mir jedoch nicht sicher, ob ich Folgendes verstehe: "Wenn das Formular-Tag außerhalb von div [data-role = page] gespeichert ist". In meinem Fall tritt das Problem bei Formularen auf, die in einem div [data-role = page] gut verschachtelt sind. Vielleicht liegt das Problem darin, dass diese Seiten in meinem Fall als Dialoge angezeigt werden?
Wytze
5

inputmodegemäß WHATWG-Spezifikation ist die Standardmethode.

Für iOS-Geräte patternkönnte das Hinzufügen ebenfalls helfen.

Verwenden Sie aus Gründen der Abwärtskompatibilität typeauch diese, da Chrome diese ab Version 66 verwendet.

<input
  inputmode="numeric"
  pattern="[0-9]*"
  type="number"
/>
Reza Ghorbani
quelle
2

Einige Browser senden Iigoner, die eine führende Null an den Server senden, wenn der Eingabetyp "Nummer" ist. Daher verwende ich eine Mischung aus jquery und html, um einen Ziffernblock zu laden und sicherzustellen, dass der Wert als Text und nicht als Zahl gesendet wird:

$(document).ready(function(){
$(".numberonly").focus(function(){$(this).attr("type","number")});
$(".numberonly").blur(function(){$(this).attr("type","text")});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">

Ali Sheikhpour
quelle
3
Dies verursacht ein nerviges Problem bei Chrome für Android. Wenn Sie auf die Eingabe tippen, wird die Tastatur nicht angezeigt. Sie müssen dann ein zweites Mal auf das Textfeld tippen, und dann wird auf der Tastatur die Nur-Zahlen-Tastatur angezeigt. Ich wünschte wirklich, wir hätten eine type="digits"Option, damit wir diese Hacks nicht haben müssten. Ich meine, es ist nicht so, dass eine Null-führende Zahl so selten ist (Postleitzahlen in den USA sind ein offensichtliches Beispiel).
Jaxidian
2
Ich habe auch das gleiche Problem! Das Einstellen des Feldes auf "type = tel" ist die bisher beste Lösung.
Ali Sheikhpour
-2

input type = number

Wenn Sie eine Zahleneingabe bereitstellen möchten, können Sie den Attributwert HTML5 input type = "number" verwenden.

<input type="number" name="n" />

Hier ist die Tastatur, die auf dem iPhone 4 angezeigt wird:

iPhone Screenshot der HTML5-Eingabetypnummer Android 2.2 verwendet diese Tastatur für Typ = Nummer:

Android Screenshot der HTML5-Eingabetypnummer

Avinash Pandit
quelle