web-dev-qa-db-ger.com

Deaktivieren Sie die Fokuseinstellung für das Datumsauswahlfeld der jQuery-Benutzeroberfläche

Mit dem jQuery UI datepicker gibt es eine Option, den Datepicker nur zu öffnen, wenn auf ein Schaltflächenbild geklickt wird. Sehen Sie sich das folgende Beispiel an:

http://jqueryui.com/demos/datepicker/#icon-trigger

Das Problem ist, dass der Fokus im Textfeld liegt, sobald der Datumsauswahlbereich geöffnet wird. Kann die Einstellung des Fokus deaktiviert werden?

Wenn Sie eine Seite wie oben auf einem mobilen Gerät wie einem iPhone verwenden, wird die Tastatur eingeblendet, da das Textfeld den Fokus erhält. Dies ist nicht wirklich benutzerfreundlich, da Sie die Tastatur schließen müssen, um tatsächlich zum Datepicker zu gelangen und sie zu verwenden ...

19
black666

setze Eingabe auf ReadOnly

<input type="text" id="datePicker" readonly>
43
Michal Shulman

Bei einer Anwendung, an der ich arbeite, ist dasselbe Problem aufgetreten. Ich habe diese Zeilen aus meiner jQuery-Datei auskommentiert, um zu verhindern, dass der Fokus automatisch auf das Textfeld gesetzt wird, nachdem auf mein Kalendersymbol geklickt wurde. Es hat für meine Bewerbung funktioniert.

if ( $.datepicker._shouldFocusInput( inst ) ) {
    inst.input.focus();
}
1
Walt

Erzielte das gewünschte Ergebnis, indem Sie die Option datepicker showOn auf "none" setzen.

$(#startdate").datepicker({
    defaultDate : "+7d",
    minDate: "+7d",
    changeMonth : true,
    changeYear : true,
    yearRange : "c:c+1",
    numberOfMonths : 1,
    showOn: "none",
    dateFormat : "dd-MM-yy",
    onClose : function(selectedDate) {
        $("#startdate").val(selectedDate);
        $( "#enddate" ).datepicker( "option", "minDate", selectedDate );
    }
});

Die Datepicker-Implementierung kennt die Werte "focus", "button" und "both" für die Option showOn. Die Standardeinstellung ist "Fokus". Daher sollte es technisch funktionieren, einen anderen Wert als diese 3 zu übergeben. Ein Wort der Vorsicht, sobald die Standardfunktionalität außer Kraft gesetzt wird, liegt es an Ihnen, die korrekte Anzeige des Datumsauswahlkalenders zu verwalten.

1
Anurag Joshi

Wenn Sie die Eingabe deaktivieren, wird die Tastatur nie angezeigt. Mögen...

    <input type="text" id="date_picker_field" name="date" disabled/>
1
user981971

Wenn Sie jQuery Mobile- verwenden, werden Sie wahrscheinlich einige der mobil ausgerichteten Datepicker dort draußen ausprobieren. Ich verwende den experimentellen jQueryUI Mobile Datepicker (von Alpha 4) nachdem wir einige andere ausprobiert hatten, weil wir eine schöne Kalenderansicht wollten. Es fügt im Grunde nur ein paar CSS-Klassen hinzu, die über dem vorhandenen Datepicker hinzugefügt werden. Ich verwende die Edited - Version, damit es als Popup funktioniert. Um das Öffnen der Tastatur zu verhindern, füge ich einfach ein jQuery-Unschärfereignis $this.blur() hinzu, unmittelbar nachdem der Fokus empfangen wurde, bevor der Auswahlbereich angezeigt wird. Das Unschärfe-Ereignis tritt so schnell auf, dass sich die Tastatur niemals öffnet.

Wenn nicht- Sie möchten wahrscheinlich dasselbe tun. Ich kenne keinen Weg, dies zu tun, ohne den Code zu bearbeiten.

1
Danny C

Ich hatte die verminderte Version v1.11.4 und in jquery-ui.min.js fand ich zwei Mal 

datepicker._shouldFocusInput(t)&&t.input.focus()

Ich habe &&t.input.focus() entfernt und es funktioniert gut.

Interessant könnte auch sein:

_shouldFocusInput:function(e){
  return e.input&&e.input.is(":visible")&&!e.input.is(":disabled")&&!e.input.is(":focus")
}

Suchen Sie immer noch nach einem Update, ohne die Kerndateien zu ändern ...

0
PiTheNumber

Ich habe eine Problemumgehung gefunden, indem ich das Eingabefeld mit jQuery deaktiviert habe, bevor der Datepicker geöffnet wurde und nach 100 ms aktiviert wurde:

$selected = $("#datepickerInput");
$selected.prop('disabled', true);
$selected.datepicker("show");
window.setTimeout(function () {
   $selected.prop('disabled', false);
}, 100);

Getestet in Chrome und auch mit Cordova unter Android 5.1.1.

0
Bjoerg

Dies ist eine ältere Frage, aber wenn Sie auf der Suche nach einer Lösung für das gleiche Problem stolpern, glaube ich , dass die Lösung in modernen Browsern darin besteht, inputmode="none" in zu verwenden das HTML-Eingabe-Tag:

<input type="text" ... inputmode="none" />

Ich habe es nicht ausführlich getestet, aber es hat gut funktioniert in Android mit den Setups, die ich verwendet habe.

0
Peter Bowers

Ich habe dasselbe erlebt, wo Tastatur/Tastaturen auftauchen, bevor ich beim Testen auf mobilen Geräten ein Datum auswählen kann. Ich habe gerade ein Attribut readonly = "true" hinzugefügt 

Stellen Sie jedoch sicher, dass Sie CSS bearbeiten und den Cursor-Zeiger angeben, da bei jedem Überfahren in der Desktopansicht ein Fragezeichen angezeigt wird.

0
iamhonee