Im ipad-Format kann das Bild in der Textbox klickbar gemacht werden (HTML5 Search-Eingabetyp für iOS erstellen)

Ich versuche, das HTML5 input type='search' mit Javascript zu simulieren. Mein Ziel ist es, so etwas zu machen:

Zunächst werde ich angeben, warum ich den HTML5-Suchtyp nicht direkt verwendet habe. Im Fall von iPad zeigt der erwähnte Eingabetyp das abgerundete Ecktextfeld und alle anderen für ein natives Sucheingabefeld erforderlichen Merkmale sehen für iOS ähnlich aus, mit Ausnahme des kleinen Kreuzsymbols (x) in der Ecke des Textfelds, wenn ein Benutzer Text eingibt in das Suchfeld.

Ich habe alles versucht - Suche nach Eingabearten in <form> , Neupositionierung von type='search' , etc. Keiner scheint den gewünschten Effekt zu erzielen (nur wenn die App auf ipad - webview oder mobile browser - bereitgestellt wird) / p>

Also habe ich das Widget mit einem Kreuzsymbol simuliert und es selektiv auf der Basis des Inhalts im Suchfeld angezeigt / versteckt. Es funktioniert in allen Versionen von desktop Safari (Wechsel durch Developer Tools). Wenn ich jedoch ein iPad ausprobiere, zeigt das Eingeben in das Suchfeld das Kreuzsymbol wie gewünscht an, aber das Touch-Ereignis kann nicht registriert werden. Ich kenne auch den Grund dafür, da die Bildschirmtastatur aktiv ist, wenn der Benutzer tippt, das nächste Berührungsereignis in der Suchtextbox verhindert wird. Aus diesem Grund wird das Symbol für das Berühren des Kreuzes ebenfalls verhindert.

Mein Code ist wie folgt:

Das HTML sieht so aus:

Der jquery-Code sieht so aus:

Gibt es eine Möglichkeit, ein Berührungsereignis auf einem Kreuzsymbol zuzulassen, ohne die Bildschirmtastatur explizit zu verwischen? Irgendein anderer Weg oder Workaround?