Handy-Standardtastatur beim Fokussieren verhindern vom Zeigen

Lesezeit: 5 Minuten

Benutzeravatar von Toni Michel Caubet
Toni Michel Caubet

so versuche ich es

<script type="text/javascript">
     $(document).ready(function(){
        $('#dateIn,#dateOut').click(function(e){
            e.preventDefault();
        }); 
     });
</script>

aber die Eingabe “startet” immer noch die Tastatur des iPhones

ps: Ich möchte dies tun, weil ich das Datepicker-Plugin für das Datum verwende

Benutzeravatar von Rene Pot
René Pot

Durch Hinzufügen des Attributs readonly (oder readonly="readonly") in das Eingabefeld sollten Sie verhindern, dass irgendjemand etwas darin eintippt, aber dennoch ein Klick-Ereignis darauf starten können.

Dies ist auch auf nicht mobilen Geräten nützlich, da Sie eine Datums-/Uhrzeitauswahl verwenden

  • Hm! Danke! aber wird der Datepicker den gewählten Wert setzen können?

    – Toni Michel Caubet

    30. September 2011 um 13:23 Uhr


  • Ja, es wird. Readonly ist nur für den Benutzer, nicht für JavaScript.

    – René Pot

    30. September 2011 um 13:28 Uhr

  • -1, da dies keine sehr robuste Methode ist. Die Eingabe ist technisch gesehen nicht “schreibgeschützt”, und daher funktionieren Dinge wie Autotabbing (mit tabindex=”x”) nicht damit

    – Patrick

    28. September 2013 um 8:41 Uhr


  • Tabindex scheint bei mir noch zu funktionieren. Allerdings kann ich nicht verwenden readonly weil bestimmte Widgets das Ereignis nicht binden readonly Eingänge.

    – Pierre de LESPINAY

    17. Januar 2014 um 10:11 Uhr


  • Nur eine Anmerkung: readonly ist ein boolesches HTML-Attribut, was bedeutet, dass sein Vorhandensein auf den Wert hinweist. Sie brauchen nur “readonly”, nicht “readonly={true|readonly|etc}”

    – Kontaktmatt

    28. Februar 2017 um 5:32 Uhr

Eingabemodus Attribut

<input inputmode="none">

Das inputmode Das globale Attribut ist ein aufgezähltes Attribut, das auf den Datentyp hinweist, der vom Benutzer beim Bearbeiten des Elements oder seines Inhalts eingegeben werden kann. Es kann folgende Werte haben:

none – Keine virtuelle Tastatur. Wenn die Seite ein eigenes Tastatureingabesteuerelement implementiert.


Ich verwende dies erfolgreich (Getestet am Chrome/Android)

CSS-Tricks: Alles, was Sie schon immer über den Eingabemodus wissen wollten

  • Dies ist die richtige Lösung für die Frage, nicht die schreibgeschützte Option

    – Benjamin

    7. März 2021 um 17:52 Uhr

  • +1 Dies ist eine viel bessere Lösung, insbesondere in einer ASP.Net-Webanwendung. Readonly ist zufällig eine Steuerelementeigenschaft, daher führt die Eingabe von readonly=’readonly’ zu Validierungsfehlern.

    – Wahrscheinlich

    20. April 2021 um 20:04 Uhr

  • So lustig, wie bei der anderen Frage mit der gleichen semantischen Bedeutung das Gleiche passiert ist. Die richtige Antwort wurde erst lange nach der Frage hinzugefügt und hat viel weniger Upvotes

    – Zachia

    24. September um 17:40 Uhr


  • Ich verstehe nicht, warum die Leute sagen, dass dies eine bessere Lösung als Readonly ist, wenn Safari immer noch eine numerische Tastatur anzeigt. Klingt für mich nicht nach einer Lösung.

    – Tom Davenport

    7. Oktober um 15:17 Uhr

Sie können Ihrem DatePicker eine Rückruffunktion hinzufügen, um ihn anzuweisen, das Eingabefeld unkenntlich zu machen, bevor der DatePicker angezeigt wird.

$('.selector').datepicker({
   beforeShow: function(){$('input').blur();}
});

Hinweis: Die iOS-Tastatur wird für den Bruchteil einer Sekunde angezeigt und dann ausgeblendet.

  • Danke, das funktioniert auch für Android. Für Android wird es nicht einmal angezeigt

    – Timaschew

    2. Januar 2015 um 20:44 Uhr

  • Funktioniert bei mir nicht in Android. Die Tastatur wird immer noch angezeigt

    – mjs

    26. Dezember 2015 um 6:25 Uhr

Benutzeravatar von Juan Manuel De Castro
Juan Manuel de Castro

Der folgende Code funktioniert bei mir:

<input id="myDatePicker" class="readonlyjm"/>


$('#myDatePicker').datepicker({
/* options */
});

$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});

Da ich den obersten Kommentar nicht kommentieren kann, bin ich gezwungen, eine “Antwort” einzureichen.

Das Problem mit der ausgewählten Antwort besteht darin, dass das Setzen des Felds auf Readonly das Feld aus der Tab-Reihenfolge auf dem iPhone entfernt. Wenn Sie also gerne Formulare eingeben, indem Sie auf “Weiter” klicken, überspringen Sie das Feld direkt.

  • Es macht Sinn, Readonly lässt den Benutzer den Wert nicht ändern (nur Javascript), also denke ich, dass es natürlich ist, dass es es überspringt

    – Toni Michel Caubet

    22. März 2012 um 8:23 Uhr


  • Bei den von mir getesteten Desktop-Browsern – einschließlich Safari/Mac – führt Sie die Tabulatortaste jedoch zum schreibgeschützten Feld.

    – John Vance

    23. März 2012 um 17:16 Uhr

  • @JohnVance Ist das wahr, auch wenn das Tab-Index-Attribut gesetzt ist? Oder würde das den Effekt außer Kraft setzen? (Ich frage, weil ich kein iPhone habe, würde mich aber über das Wissen freuen)

    – Fernando Silva

    28. Januar 2014 um 23:39 Uhr

  • @FernandoSilva Ich habe das auf iPhone Safari getestet, mit Tab-Index überspringen Sie immer noch das Feld.

    – Betti

    12. Dezember 2014 um 3:04 Uhr


Benutzeravatar der Community
Gemeinschaft

Ich habe hier eine ähnliche Frage gestellt und eine fantastische Antwort erhalten – verwenden Sie den iPhone-nativen Datepicker – es ist großartig.

So deaktivieren Sie die iPhone-Tastatur für ein bestimmtes Eingabefeld auf einer Webseite

Synopse / Pseudo-Code:

if small screen mobile device 

  set field type to "date" - e.g. document.getElementById('my_field').type = "date";
  // input fields of type "date" invoke the iPhone datepicker.

else

  init datepicker - e.g. $("#my_field").datepicker();

Der Grund für das dynamische Festlegen des Feldtyps auf “Datum” ist, dass Opera ansonsten seine eigene native Datumsauswahl öffnet, und ich gehe davon aus, dass Sie die Datumsauswahl konsistent in Desktop-Browsern anzeigen möchten.

  • Es macht Sinn, Readonly lässt den Benutzer den Wert nicht ändern (nur Javascript), also denke ich, dass es natürlich ist, dass es es überspringt

    – Toni Michel Caubet

    22. März 2012 um 8:23 Uhr


  • Bei den von mir getesteten Desktop-Browsern – einschließlich Safari/Mac – führt Sie die Tabulatortaste jedoch zum schreibgeschützten Feld.

    – John Vance

    23. März 2012 um 17:16 Uhr

  • @JohnVance Ist das wahr, auch wenn das Tab-Index-Attribut gesetzt ist? Oder würde das den Effekt außer Kraft setzen? (Ich frage, weil ich kein iPhone habe, würde mich aber über das Wissen freuen)

    – Fernando Silva

    28. Januar 2014 um 23:39 Uhr

  • @FernandoSilva Ich habe das auf iPhone Safari getestet, mit Tab-Index überspringen Sie immer noch das Feld.

    – Betti

    12. Dezember 2014 um 3:04 Uhr


Benutzeravatar von Akbar Badhusha
Akbar Badhusha

Der beste Weg, dies meiner Meinung nach zu lösen, ist die Verwendung von “ignoreReadonly”.

Machen Sie das Eingabefeld zuerst schreibgeschützt und fügen Sie anschließendignoreReadonly:true hinzu. Dadurch wird sichergestellt, dass das Popup angezeigt wird, selbst wenn das Textfeld schreibgeschützt ist.

$('#txtStartDate').datetimepicker({
            locale: "da",
            format: "DD/MM/YYYY",
            ignoreReadonly: true
        });
        $('#txtEndDate').datetimepicker({
            locale: "da",
            useCurrent: false,
            format: "DD/MM/YYYY",
            ignoreReadonly: true
        });
});

1429880cookie-checkHandy-Standardtastatur beim Fokussieren verhindern vom Zeigen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy