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 keine Möglichkeit gefunden, dies zu tun, aber ich habe eine akzeptable Lösung gefunden, indem ich die buttonImage-Funktion mit buttonImageOnly verwendet und dann das Datumsfeld deaktiviert habe.

$("#id_date").datepicker({
        dateFormat: 'yy/mm/dd',
        showOn:"button",
        buttonImage: "/icons/calendar.gif",
        buttonImageOnly: true });
$('#id_date').attr("disabled", true);

Wenn Sie dies in einem Formular tun, stellen Sie sicher, dass Sie das Feld vor dem Absenden oder Serialisieren des Formulars wieder aktivieren, sonst wird der Wert nicht gesendet (zumindest auf dem iPad). Ich mache das Folgende in meiner Sendefunktion:

$('#id_date').attr("disabled", false);
var dataString = $('#the_form').serialize();
$.ajax({
     type: "POST",
     url: 'myurl',
     data: dataString,
     ...

Answer 2

Ich bin jetzt drei Stunden dabei und komme nicht weiter. Ich habe kein Iphone, also versuche ich das oben genannte auf einem Android-Telefon mit 2.3.

Auf meinem Telefon bekomme ich immer noch die Tastatur jedes Mal, nichts stoppt es und ich kann nicht "nur lesen" verwenden, da es meine asp.net4 / C#-Code hinter Feuern, die ein bisschen cr#p ist, aber das ist, wie es ist.

Meine erste Frage lautet also: Funktionieren diese Ideen nur auf Iphones?

Prost

更新情報

Ich habe einen Weg gefunden, um die oben genannten Antworten für ASP.Net 4 zu machen.

Scheint, dass < asp:TextBox ID="etwas" ...> nicht Javascript oder JQuery auslöst, da es eine "spezielle" ID wie "ctl00_content....." auf der Server-Seite zugewiesen ist, die nicht dasselbe wie "#something" im JQuery-Code ist. Aber dank Versuch und Irrtum mit diesem Beitrag:-

Abrufen von Werten aus asp:textbox mit JQuery

Ich habe herausgefunden, dass die Verwendung der folgenden (mit Dank an obigen Poster) wird der Fokus verwischen und stoppen Handys zeigen die Tastatur (zumindest mein Android sowieso :)

$("#<%=sDatepicker.ClientID%>").focus(function () {
        $(this).blur();
    });

Der folgende einfache Beispielcode, der mit der oben genannten JQuery verwendet wird, soll anderen hoffentlich helfen:

<asp:TextBox ID="sDatepicker" OnTextChanged="sDatepicker_changed" AutoPostBack="True" ReadOnly="False"></asp:TextBox>

Natürlich ist "sDatepicker_changed" Ihr Code hinter dem Code.

 protected void sDatepicker_changed(object sender, EventArgs e)
{//do stuff here..}

Ich kann auch die datepicker Pop-up immer noch und verwenden Sie meinen Code hinter Funktion, um ein anderes Textfeld mit einem Enddatum 7 Tage von diesem ein zu füllen.

Aktualisierung 2

Es scheint, dass dies nur in Mobiltelefonen funktioniert! In einem Browser wird ein "Object reference not set to an instance of an object" ausgelöst, weil asp.net entschieden hat, dass die TextBox nach einem Postback nicht existiert, aber JavaScript ausgeführt wird. Ich komme vom Thema ab und werde nicht mehr sagen.

Update 3 - Meine Antwort

Jetzt ist alles geregelt :) haben meine <script>..</script> mit einer <Div> und machen Sie es nur sichtbar, wenn Sie die JavaScript Code, wenn ich erkannt habe, dass es sich um ein mobiles Gerät handelt, indem ich:

bool IsMobile = Page.Request.Browser.IsMobileDevice;

y

if (IsMobile == true)
{                
    mobileScript.Visible = true;
}

Prost

Trev.

Answer 3

Ich glaube, dass diese Lösung für alle verschiedenen Datums- und Zeitwähler funktionieren könnte, aber ich habe sie nur mit dem Datumspicker von XDSoft .

Die Idee ist, Mausereignisse zu deaktivieren ( pointer-events: 'none' ) auf der input Element, damit die Tastatur nicht angezeigt wird, und fügen Sie dann ein onclick Ereignis bei einem übergeordneten div die sich um den input Element. Die Website onclick sollte dann die Datums- und Zeitauswahl öffnen.

Code-Beispiel

Hier wird gezeigt, wie man das Problem bei der Verwendung von XDSoft's Datetimepicker .

Die Lösung geht davon aus, dass die input Element ist in ein div Element.

(function($){
    var originalDateTimePicker = $.fn.datetimepicker;
    $.fn.datetimepicker = function(args){
        this.each(function(i, dateTimePicker){
            dateTimePicker = $(dateTimePicker);
            dateTimePicker.closest('div').on('click', function(e){ 
                dateTimePicker.trigger('open');
            });
            dateTimePicker.css({ 'pointer-events': 'none' });
        });
        return originalDateTimePicker.apply(this, arguments);
    };
})(window.jQuery||window.$);

Answer 4

Ich habe diesen Code verwendet und es funktioniert gut... ".hasDatepicker" Klasse ist für meine Eingabe, die das Datum Picker halten

<script type="text/javascript">

jQuery( document ).ready(function() {

var ybdDatePick = jQuery( ".hasDatepicker" );

    jQuery(function() {
       ybdDatePick.datepicker({ }).attr('readonly','readonly');

       ybdDatePick.on('focus',function() {
            jQuery(this).trigger('blur');
             this.datepicker({ }).attr('readonly','readonly');

          }
        );

});
});

Answer 5

Ich glaube, in modernen Browsern ist es besser, inputmode="none" zu verwenden. Hier ist der HTML-Code:

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

Zumindest auf Android Chrome dies ermöglicht meine datepicker (offensichtlich separat über jQuery initialisiert) zu kommen auf meinem Handy und die weiche Tastatur tut no auftauchen.

Dadurch werden die Probleme vermieden, die auftreten können, wenn das Feld schreibgeschützt ist (der Wert kann nicht gelöscht werden usw.)