Mitunter nervt es ja, wenn das Smartphone beim Ausfüllen von Formularfeldern allzu sehr “mitdenkt”. Manchmal ist’s ja ganz gut, aber oft eben nicht. So möchte ich z.B. eigentlich nicht, dass mein Touch-Device bei der Eingabe einer E-Mail-Adresse den ersten Buchstaben erstmal groß schreiben will.

Also schreibe ich in solchen Fällen:
<input type="email" autocapitalize="off" />

An anderer Stelle stört mich vielleicht die Autokorrektur, oder die Autovervollständigung, die bei der Eingabe meines Vornamens “Michael” nach 2 Buchstaben “Milch” oder ähnliches vorschlägt.

Da empfiehlt sich dann:
<input type="text" autocorrect="off"  />
und/oder
<input type="text" autocomplete="off"  />

… oder gleich beides:
<input type="text" autocorrect="off" autocomplete="off"  />

2. Kurz nachdenken bei input type=”number”

Da bin ich schön in die Falle getappt:
Die neuen html5 input types sind ja großartig, u.a. weil sie in den verschiedenen mobilen Endgeräten gleich das passende Software-Keyboard einblenden, je nachdem, welche Eingabe erwartet wird.

Nun habe ich im jüngsten Projekt sowohl die PLZ als auch die Hausnummer mit input type=”number” versehen, verkürzt in etwa so:

<label>Nr.</label>
<input type="number" />

Auf den verschiedenen Smartphones geht nun also bei der Eingabe in dieses Feld ein Nummern Keyboard auf. Während man beim iPhone oder beim Opera Mobile nun dennoch auch Buchstaben eingeben kann (das Software-Keyboard lässt sich umschalten), ist dies bei Androiden 2.2 / 2.3 nicht möglich. Einfach (richtigerweise?) gar nicht möglich!

Warum mich das beschäftigt?
Für eine PLZ ist das im Moment OK (solange nicht eine Form wie D-10879 gewünscht wird) , aber mein aktueller Projektleiter ist an der Aufgabe gescheitert, seine Hausnummer 112b einzugeben.

Die gewünschte Hintergrundfarbe kann man in Hex-Werten oder in RGBA angeben. Die RGBa Kombination ist zu bevorzugen, da dies sowohl auf iOS, als auch auf Android Geräten funktioniert. Dies sieht man nur beim Testen auf einem iPhone/Android selbst, nicht am Desktop im Safari/Chrome.

Beispiele:
/* kein Hintergrund, nur iOS:*/
-webkit-tap-highlight-color: transparent;

/* kein Hintergrund in iOS und Android:  */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

/* grauer Hintergrund mit 40% Transparenz: */
-webkit-tap-highlight-color:rgba(204,204,204,0.4); 

Ob und wie das auf Windows Phone 7.5 (und höher) Geräten geht, wäre noch auszuchecken.