{"id":1699,"date":"2011-01-10T16:01:04","date_gmt":"2011-01-10T11:01:04","guid":{"rendered":"http:\/\/www.borncity.com\/blog\/2011\/01\/10\/ipad-safari-browser-patzt-bei-formulareingaben\/"},"modified":"2023-05-12T15:05:30","modified_gmt":"2023-05-12T13:05:30","slug":"ipad-safari-browser-patzt-bei-formulareingaben","status":"publish","type":"post","link":"https:\/\/borncity.com\/blog\/2011\/01\/10\/ipad-safari-browser-patzt-bei-formulareingaben\/","title":{"rendered":"iPad: Safari-Browser patzt bei Formulareingaben"},"content":{"rendered":"<p>So hatte ich mir das nicht vorgestellt! Eigentlich wollte ich das (f\u00fcr ein Projekt zugelegte) iPad als \"mobiles\" B\u00fcro nutzen, mit dem man auch Aufgaben per Internet erledigen kann. Leider bin ich auf ein dickes Problem beim Safari-Browser gesto\u00dfen, der diesen Ansatz zunichte macht \u2013 unter [1] hatte ich das Problem bereits am Rande erw\u00e4hnt. Aber jetzt habe ich das Ganze nochmals detaillierter analysiert.<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ssl-vg03.met.vgwort.de\/na\/7acff179f4f24a57bf6dfdd15eaeb8cb\" alt=\"\" width=\"1\" height=\"1\" \/><\/p>\n<p><!--more--><\/p>\n<h2>Wo liegt das Problem?<\/h2>\n<p>Das Problem ist recht fix auf den Punkt gebracht: Um beim iPad Texteingaben vornehmen zu k\u00f6nnen, muss iOS ein f\u00fcr Texteingaben vorgesehenes Bedienelement in der GUI oder im Browser erkennen. Nur dann wird die virtuelle Tastatur eingeblendet oder eine angeschlossene Bluetooth-Tastatur freigeschaltet. W\u00e4hrend dies bei iPad-Apps durch die Entwickler innerhalb der GUI sichergestellt werden kann, ist man bei HTML-Inhalten darauf angewiesen, dass die Rendering-Engine des Safaria-Browsers (oder konkret der in iOS integrierten WebKit-Bibliotheken) dies sauber umsetzt.<\/p>\n<p>Und hier liegt leider der \"Hase im Pfeffer\". Bereits zum Jahreswechsel fiel mir auf, dass ich in Microsofts Social Answers-Foren keine Beitr\u00e4ge posten konnte. Safari zeigt zwar die Forenseiten an und erm\u00f6glicht auch das Bearbeitungsformular zu \u00f6ffnen. Aber es sind keine Texteingaben m\u00f6glich. Da Microsoft mit seiner Forensoftware gelegentlich Probleme hat und auch Browser wie IE oder FF schon mal mit einem Formular, welches nur HTML-Code anzeigt, auftauchen, habe ich diesem Thema erst einmal keine gr\u00f6\u00dfere Bedeutung beigemessen. Eine Analyse ist auf dem iPad zudem schwierig, da Safari keinen HTML-Quellcode anzeigt (und Zusatzapps f\u00fcr diesen Zweck sind eher eine Zumutung, als eine Hilfe).<\/p>\n<p>Nachdem ich letzten Sonntag schnell einen Blog-Beitrag in WordPress editieren wollte (da hatte sich ein Tippfehler eingeschlichen), stand ich vor einem \u00e4hnlichen Problem. Das Bearbeitungsformular lie\u00df sich zwar \u00f6ffnen, und ich konnte auch das Feld zur \u00dcberarbeitung des Blog-Beitrags \u00f6ffnen. Dann fehlten mir allerdings die Cursortasten, um im Textfeld zum Ende des Blog-Beitrags zu bl\u00e4ttern. Erst als ich die Bluetooth-Tastatur koppelte, konnte ich \u00fcber deren Cursortasten zu den gew\u00fcnschten Textstellen des Textbereichs gehen.<\/p>\n<p>Also habe ich den HTML-Quellcode auf einem Windows-System analysiert. Der HTML-Code im Social Answers-Forum sieht folgenderma\u00dfen aus.<\/p>\n<blockquote><p>&lt;div class=\"content\"&gt;<br \/>\n&lt;textarea name=\"body\" rows=\"20\" cols=\"100\"&gt;<br \/>\n\u2026<br \/>\n&lt;\/textarea&gt;<br \/>\n&lt;\/div&gt;<\/p><\/blockquote>\n<p>w\u00e4hrend der HTML-Code in WordPress beim Editieren eines Beitrags folgende HTML-Tags enth\u00e4lt.<\/p>\n<blockquote><p>&lt;div id='editorcontainer'&gt;<br \/>\n&lt;textarea rows='10' cols='40' name='content' tabindex='2'<br \/>\nid='content'&gt;<br \/>\n\u2026<br \/>\n&lt;\/textarea&gt;<br \/>\n&lt;\/div&gt;<\/p><\/blockquote>\n<p>Der Safari-Browser (bzw. die Routinen der WebKit-Bibliotheken) werden die Probleme auf, sobald im HTML-Code ein <em>&lt;textarea&gt;<\/em>-Tag, eingebettet in einen &lt;div&gt;-Tags, auftritt. Der Tag wird zwar korrekt gerendert \u2013 aber die Bibliothek scheint den Tag-Inhalt gegen\u00fcber iOS nicht immer als \"Texteingabefeld\" auszuweisen. Folglich sieht iOS auch keine Veranlassung, den Tastatureingabefokus auf das Feld zu setzen und die virtuelle Tastatur einzublenden. Bei WordPress fehlte dagegen die Funktion zum Bl\u00e4ttern (Cursortasten).<\/p>\n<p>Im ersten Moment glaubte ich noch, dass generell der &lt;textarea&gt;-Tag das Problem darstellt. Aber so einfach ist es nicht. Das Feedback-Formular meiner Webseite http:\/\/www.borncity.de enth\u00e4lt auch einen solchen Tag, aber das Eingabefeld wird im Safari-Browser des iPad korrekt erkannt.<\/p>\n<p>Mein Versuch, das Ganze schnell mal an einem Web.de-Freemail-Konto zu verifizieren, scheiterte zuerst daran, dass ich f\u00fcr die Authentifizierung einfach nicht die von mir gew\u00e4hlten Sonderzeichen \u00fcber die Bildschirmtastatur des iPad eingeben konnte. Erst eine aktivierte Bluetooth-Tastatur erm\u00f6glichte mir die Anmeldung am Web.de-Webmail-Konto. Hier konnte ich dann im Feld f\u00fcr den Body-Text der Nachricht Tastatureingaben vornehmen.<\/p>\n<p>Ob es jetzt an Cascading Stylesheets, die bei der Microsoft-Forensoftware verwendet werden, oder an einer \"ung\u00fcnstigen\" Schachtelung von &lt;div&gt;- und &lt;textarea&gt;-Tags liegt, habe ich nicht mehr eruiert. Es ist auch letztendlich egal, es kann nicht sein, dass Webdesigner jetzt auch noch irgend ein iOS mit iPad im Hinterkopf haben m\u00fcssen, um eine simple Formulareingabe zu designen.<\/p>\n<p>Mein Fazit ist jedenfalls, dass iPad-Benutzer ganz schnell bei HTML-Seiten, die mehrzeilige Texteingabefelder \u00fcber den <em>&lt;textarea&gt;<\/em>-Tag bereitstellen, ausgebremst werden k\u00f6nnen.<\/p>\n<blockquote><p><span style=\"color: #333333;\"><strong>Update:<\/strong> Bei WordPress habe ich doch noch eine L\u00f6sung zum Bearbeiten eines Beitrags gefunden. Die Lupe erm\u00f6glicht ja das Markieren und positionieren im Text. Tippt man auf das Bearbeitungsfeld und h\u00e4lt den Finger l\u00e4nger auf dem Text, erscheint irgendwann die Lupe. Dann kann man die Lupe mit dem Finger nach unten oder oben verschieben und so ein Scrollen im Textfeld ausl\u00f6sen. Hebt man dann den Finger ab, erscheint das Bearbeitungsmen\u00fc, welches durch Antippen einer anderen Textstelle geschlossen werden kann. Ziemlich umst\u00e4ndlich, aber zumindest ein Notnagel (und f\u00fcr gr\u00f6\u00dfere Korrekturen nehme ich ein Bluetooth-Keyboard. Aber f\u00fcr die Microsoft-Foren habe ich noch keine L\u00f6sung gefunden, um Beitr\u00e4ge zu bearbeiten.<\/span><\/p><\/blockquote>\n<p><strong>Nimm doch einen alternativen Browser \u2026<\/strong><\/p>\n<p>Dies war mein erster Gedanke, als der Effekt erstmalig bemerkt wurde. Nun, ich habe ein paar Browser zum Testen auf dem iPad. Leider hat man in diesem Fall die Rechnung ohne den Wirt \u2013 sprich Apple \u2013 gemacht. Alle im iStore angebotenen Browser setzen letztendlich auf Safari bzw. den Webkit-Bibliotheken auf und d\u00fcrfen auch kein JavaScript oder weitere aktive Inhalte ausf\u00fchren. Apples Regularien verbieten dies. Aufmerksam wurde ich auf diesen Sachverhalt (den ich aber bereits vermutete) bei der Recherche nach einem Firefox f\u00fcr das iPad. Die Mozilla-Entwickler erl\u00e4utern unter [2, 3] die Hintergr\u00fcnde, warum es keinen Firefox auf dem iPad geben wird. Wie der Opera Mini-Browser das regelt, entzieht sich meiner Kenntnis. Das Teil schaffte es nicht mal 10 Sekunden im Test, dann habe ich die App wieder gel\u00f6scht.<\/p>\n<p>Also: iPad-Benutzer sind da schon arme Schweine &#8211; nicht nur kein Flash, sondern auch keine Webinhalte, die auf JavaScript setzen. Dass die fehlende JavaScript-Unterst\u00fctzung im Safari der Grund f\u00fcr die fehlende Formulareingabem\u00f6glichkeit darstellt, kann ich \u00fcbrigens verneinen. Ich habe meine WordPress-Bearbeitungsfunktionen im Firefox mit deaktiviertem JavaScript problemlos ausf\u00fchren k\u00f6nnen. An dieser Stelle habe ich meine Versuche abgebrochen \u2026<\/p>\n<p>Sch\u00f6ne neue Welt! Und damit wird das ganze Konzept des Tablet-PC (zumindest auf Basis des iPad) in meinen Augen ziemlich obsolet \u2013 wie das Teil in Firmen produktiv eingesetzt werden soll, vermag ich auch nicht zu erkennen. Ich erwische mich jetzt jedenfalls st\u00e4ndig, dass ich mein Netbook boote, um schnell mal was im Internet nachsehen und ggf. Forenbeitr\u00e4ge beantworten zu k\u00f6nnen. Dabei war das Ganze ja doch etwas anders gedacht \u2013 Freunde werden wir (dass iPad und meine Wenigkeit) unter diesen Gesichtspunkten in diesem Leben wohl nicht mehr werden. Ich plane momentan einen Test verschiedener Browser. Vielleicht findet sich da ja eine App, die diese Probleme nicht hat und auch sonst einige Verbesserungen gegen\u00fcber Safari mitbringt.<\/p>\n<p><strong>Weiterf\u00fchrende Links:<br \/>\n<\/strong>1: \"Nette\" \u00dcberraschungen 2011<br \/>\n2: <a href=\"https:\/\/www.quora.com\/Will-Firefox-Mobile-ever-be-released-for-iOS-devices\/answer\/Matt-Brubeck\" target=\"_blank\" rel=\"noopener\">Will Firefox ever be released for iOS devices?<\/a><br \/>\n3: <a href=\"http:\/\/techcrunch.com\/2010\/12\/27\/firefox-iphone-2\/\" target=\"_blank\" rel=\"noopener\">Techcrunch-Artikel zum Firefox<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>So hatte ich mir das nicht vorgestellt! Eigentlich wollte ich das (f\u00fcr ein Projekt zugelegte) iPad als \"mobiles\" B\u00fcro nutzen, mit dem man auch Aufgaben per Internet erledigen kann. Leider bin ich auf ein dickes Problem beim Safari-Browser gesto\u00dfen, der &hellip; <a href=\"https:\/\/borncity.com\/blog\/2011\/01\/10\/ipad-safari-browser-patzt-bei-formulareingaben\/\">Weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[439],"tags":[4329,493],"class_list":["post-1699","post","type-post","status-publish","format-standard","hentry","category-ipad","tag-ipad","tag-patzt-bei-webseiten"],"_links":{"self":[{"href":"https:\/\/borncity.com\/blog\/wp-json\/wp\/v2\/posts\/1699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/borncity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/borncity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/borncity.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/borncity.com\/blog\/wp-json\/wp\/v2\/comments?post=1699"}],"version-history":[{"count":0,"href":"https:\/\/borncity.com\/blog\/wp-json\/wp\/v2\/posts\/1699\/revisions"}],"wp:attachment":[{"href":"https:\/\/borncity.com\/blog\/wp-json\/wp\/v2\/media?parent=1699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/borncity.com\/blog\/wp-json\/wp\/v2\/categories?post=1699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/borncity.com\/blog\/wp-json\/wp\/v2\/tags?post=1699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}