Vraag ipad webapplicatie: Hoe voorkom ik dat het toetsenbord opduikt in jQuery-datepicker


Ik heb een formulier met een datumveld waaraan een jQuery-datepicker is gekoppeld.

Wanneer ik het datumveld selecteer, verschijnt de datepicker, maar dan schuift het iPad-toetsenbord in beeld en wordt de datepicker verborgen.

Hoe voorkom ik dat het toetsenbord in deze situatie opduikt?


34
2017-08-21 22:29


oorsprong


antwoorden:


Ik gebruikte een licht aangepaste versie van de oplossing van Rob Osborne en het verhinderde met succes dat het toetsenbord op de iPad en iPhone verscheen.

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

28
2017-11-19 15:14



In plaats van de input uit te schakelen, geeft u deze de eigenschap "readonly". Dit is beter dan het uitschakelen omdat u het formulier kunt opslaan zonder het te wijzigen.

Hier is meer info over readonly.


23
2017-07-29 03:59



Zo ben ik erin geslaagd om dit probleem op te lossen door de browser te laten denken dat de gebruiker de invoer heeft verblind zodat deze het toetsenbord verbergt voordat het tijd heeft om te tonen:

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

Werkt goed voor mij waar veel van de andere oplossingen die ik heb gevonden dat niet deden!


11
2018-02-05 20:30



Ik heb een combinatie van CDeutsch en Rob's antwoorden gebruikt om het invoerveld uit te schakelen wanneer de gebruiker op de kalender klikt en vervolgens het veld in te schakelen nadat de datumkiezer als volgt is gesloten:

$(".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
});

Het voordeel is dat de gebruiker de datum handmatig kan bewerken door in het invoerveld te klikken op het toetsenbord van de iPad of de datumkiezer te gebruiken door op de datumknop te klikken.

Nogmaals bedankt voor alle geweldige input over dit probleem, ik zat vast aan dezelfde kwestie totdat ik de bovenstaande berichten las.


4
2017-12-14 16:07



Als u de date-timepicker de 'beforeShow'-optie is niet beschikbaar. Alleen het toevoegen van het kenmerk 'alleen-lezen' aan de ingevoerde invoer zal de datumkiezer volledig uitschakelen.

Oplossing is om het kenmerk 'alleen-lezen' in het element te gebruiken en 'ignoreReadonly: true' toe te voegen als een optie voor de datumkiezer.

$(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>


4
2017-07-30 14:55



Ik heb geen manier gevonden om dit te doen, maar ik heb uiteindelijk een acceptabel werk gedaan bij het gebruik van de functie buttonImage met buttonImageOnly en vervolgens het datumveld uit te schakelen.

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

Als u dit op een formulier doet, zorg er dan voor dat u het veld opnieuw inschakelt voordat u het formulier indient of serialiseert of dat de waarde niet wordt verzonden (op iPad tenminste). Ik doe het volgende in mijn verzendfunctie:

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

1
2017-09-18 19:21



Drie uur later en nergens heen. Ik heb geen Iphone, dus ik probeer het bovenstaande op een Android-telefoon met 2.3.

Op mijn telefoon krijg ik nog altijd het toetsenblok, niets stopt het en ik kan 'alleen lezen' niet gebruiken omdat het mijn asp.net4 / C # code achter het schieten stopt, wat een beetje cr # p is maar zo is het.

Dus mijn eerste vraag is of deze ideeën alleen op Iphones werken?

proost

Bijwerken

Ik heb een manier gevonden om de bovenstaande antwoorden voor ASP.Net 4 te laten werken. Dus ik dacht dat ik het zou delen.

Het lijkt erop dat <asp: TextBox ID = "something" ...> JavaScript of JQuery niet activeert omdat het een 'speciale' ID zoals "ctl00_content ....." aan de serverzijde heeft toegewezen, wat niet hetzelfde is als "#something" in de JQuery-code. Maar dankzij vallen en opstaan ​​met dit bericht: -

Waarde ophalen uit asp: textbox met JQuery

Ik bedacht dat het gebruik van het volgende (met dank aan bovenstaande poster) de focus vervaagt en stop mobiele telefoons met het toetsenbord (tenminste mijn Android in ieder geval :)

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

dus de volgende eenvoudige voorbeeldcode die wordt gebruikt met de JQuery hierboven zou hopelijk anderen moeten helpen:

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

Natuurlijk is 'sDatepicker_changed' uw code achter code.

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

Ik kan de datepicker ook nog een keer laten verschijnen en mijn code achter de functie gebruiken om een ​​ander tekstvak te vullen met een einddatum 7 dagen na deze.

Update 2

Het lijkt erop dat dit alleen werkt op mobiele telefoons! in een browser gooit het een "Objectreferentie niet ingesteld op een exemplaar van een object" omdat asp.net heeft besloten dat de TextBox niet bestaat na een postback maar JavaScript uitvoert. Afstappen van onderwerp, dus niet meer zeggen.

Update 3 - Mijn antwoord

Alle nu gesorteerd :), hebben mijn omsingeld <script>..</script> met een <Div> en maak het alleen zichtbaar indien nodig om de JavaScript code, wanneer ik heb gedetecteerd dat het een mobiel apparaat is, door gebruik te maken van:

bool IsMobile = Page.Request.Browser.IsMobileDevice;

en

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

proost

Trev.


0
2018-01-31 16:07



Ik geloof dat deze oplossing zou kunnen werken voor alle verschillende datum tijd pickers, maar ik heb het alleen getest met de datumkiezer van XDSoft.

Het idee is om muisgebeurtenissen uit te schakelen (pointer-events: 'none') op de input element zodat het toetsenbord niet verschijnt en voeg dan een toe onclick evenement op een ouder div die zich om de input element. De onclick evenement moet dan de datum tijdkiezer openen.

Codevoorbeeld

Dit laat zien hoe het probleem kan worden opgelost tijdens het gebruik XDSoft's gegevensimepicker.

De oplossing gaat ervan uit dat de input element is gewikkeld in een 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.$);

0
2017-11-07 12:54



Ik heb deze code gebruikt en het werkt geweldig ... De klasse ".hasDatepicker" is voor mijn invoer met de datumkiezer

<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');

          }
        );

});
});


0
2017-10-23 09:42



Met de nieuwste versie van de DatePicker is het mogelijk om dit als volgt te doen:

//for tablets / phones
    $('#yourElement').datepicker().on('show', function (e) {
        $(this).trigger('blur');
    })

Houd er echter rekening mee dat het toetsenbord een seconde lang onder aan het scherm kan knipperen totdat de vervaging () is voltooid.


-1
2018-06-19 09:53