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
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
<input inputmode="none">
Das
inputmodeDas 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
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
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
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
});
});
