ipad-Webanwendung: Wie verhindere ich, dass die Tastatur bei jquery datepicker auftaucht?

Question

Ich habe ein Formular mit einem Datumsfeld mit einem Jquery-Datepicker an sie angehängt.

Wenn ich das Datumsfeld auswähle, wird die Datumsauswahl eingeblendet, aber dann schiebt sich die iPad-Tastatur in die Ansicht und verdeckt die Datumsauswahl.

Wie kann ich verhindern, dass die Tastatur in dieser Situation erscheint?

Answer 1

Ich habe eine leicht abgewandelte Version der Lösung von Rob Osborne verwendet und damit erfolgreich verhindert, dass die Tastatur auf dem iPad und dem iPhone auftaucht.

$(".datePicker").datepicker({
    showOn: 'button',
    onClose: function(dateText, inst) 
    { 
        $(this).attr("disabled", false);
    },
    beforeShow: function(input, inst) 
    {
        $(this).attr("disabled", true);
    }
});

Answer 2

Anstatt die Eingabe zu deaktivieren, geben Sie ihr die Eigenschaft "schreibgeschützt". Dies ist besser als die Deaktivierung, weil Sie das Formular speichern können, ohne es zu ändern.

Hier ist mehr Info über Readonly .

Answer 3

So habe ich dieses Problem in den Griff bekommen, indem ich den Browser dazu gebracht habe, zu denken, dass der Benutzer die Eingabe verwischt hat, so dass er die Tastatur ausblendet, bevor sie Zeit hat, sich zu zeigen:

$('blabla')
    .datepicker(
    {
        /* options */
    })
    .on('focus',function()
    {
        $(this).trigger('blur');
    });

Es funktioniert gut, wo viele der anderen Lösungen, die ich gefunden habe, nicht funktionierten!

Answer 4

Ich habe eine Kombination aus CDeutsch und Robs Antworten verwendet, um das Eingabefeld zu deaktivieren, wenn der Benutzer auf den Kalender klickt, und dann das Feld zu aktivieren, nachdem die Datumsauswahl wie folgt geschlossen wurde:

$(".date").datepicker({
    showOn: "button",
    onClose: function(dateText, inst) { $(this).attr("disabled", false); },
    beforeShow: function(dateText, inst) { $(this).attr("disabled", true); },
    buttonImage: "/images/calendar.png",
    buttonImageOnly: true
});

Dies hat den Vorteil, dass der Benutzer das Datum manuell bearbeiten kann, indem er in das Eingabefeld klickt, wodurch die Tastatur des iPads aufgerufen wird, oder indem er die Datumsauswahl durch Klicken auf die Schaltfläche "Datum" verwendet.

Nochmals vielen Dank für alle großen Beitrag zu diesem Problem, war ich auf dieses gleiche Problem bis zum Lesen der oben genannten Beiträge stecken.

Answer 5

Wenn Sie die date-timepicker die Option "beforeShow" ist nicht verfügbar. Nur durch Hinzufügen des Attributs "readonly" zum Eingabefeld wird die Datumsauswahl vollständig deaktiviert.

Die Lösung ist, das Attribut "readonly" für das Element zu verwenden und "ignoreReadonly: true" als Option für die Datumsauswahl hinzuzufügen.

$(function() {
     $('#datetimepicker1').datetimepicker({
    format: 'MM-DD-YYYY',
    minDate: moment(),
    ignoreReadonly: true
     });
});

<div class='input-group date' id='datetimepicker1'>
  <input type='text' id="date" readonly style="cursor: default; background-color: #fff" class="form-control" />
  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>