Ipad + How to prevent the keyboard from popping up on jquery datepicker

Question

I want to disable the keyboard popup from my Ipad so I do something like this, but it's not as my wish.

I have a text box:

<h:inputText id="txtDate" value="#{myDateController.selected.DOB}"

I try to use "readonly" attribute but data can not save to the Database. I also use this: $("#frmEdit\:txtDate").attr("disabled", true) --> but it's not ok

I searched on the web and applied my code with this link, but it's also not ok: ipad web application: How do I prevent the keyboard from popping up on jquery datepicker

$(function() {
  //$("#frmEdit\\:txtDate").attr("disabled", true)
    $("#frmEdit\\:txtDate").datetimepicker({
     // showOn: "button"
        showOn: "both",   
        buttonImage: "../images/calendar.png",
        buttonImageOnly: true,
        constrainInput: true,
        showButtonPanel: true,         
        dateFormat: 'dd-M-yy',
        addSliderAccess: true,
        sliderAccessArgs: { touchonly: false },
    onClose: function(dateText, inst){ 
        $(this).attr("disabled", false);
    },
    beforeShow: function(input, inst){
        $(this).attr("disabled", false);
    }
});
});

What's wrong with my code ? or any other solution to do ? Many Thanks

yes, only set attribute readonly, it's ok – Bryan May 22 '12 at 09:03 — Bryan, May 22 '12 at 09:03

Wouter Konecny · Answer 1 · 2014-03-24T09:45:50.740

12

There is a option in HTML with let's you do this kind of thing:

readonly="true"

Add this to your input field element. It will sort of "disable" the input field, but still fires events when something is done with it (like clicking on it).

Check out W3Schools Readonly Attribute for more information.

edited Mar 24 '14 at 09:45

answered May 18 '12 at 10:48

Wouter Konecny

3,260
3
19
26

lastime I already used readonly="true" but data can not save to the Database – Bryan May 22 '12 at 10:29
1

This should be the accepted answer. disabled doesn't fire any events and the datepicker won't show. – erstaples Nov 12 '14 at 16:15

rAthus · Answer 2 · 2014-11-18T08:09:25.293

3

That's how I managed to deal with this problem by making the browser think the user blured the input so it hides the keyboard before it has time to show :

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

Works well for me where many of the other solutions I found didn't !

edited Nov 18 '14 at 08:09

answered Feb 05 '14 at 20:33

rAthus

810
9
17

1

`readonly` had no effect in Safari on iPad (iOS8). This works fairly well for me, but the page "jumps" every time you tap part of the calendar as the keyboard starts to open then closes. – Mr Jonny Wood Nov 20 '14 at 23:22

score 0 · Accepted Answer · answered May 21 '12 at 08:22

0

Have you tried disabling the input field using HTML (so adding disabled="disabled")?

answered May 21 '12 at 08:22

Martijn

3,696
2
38
64

Yes, it's ok with me now. I set attribute readonly for my textbox: document.getElementById('txtDate').setAttribute("readonly", "true"); – Bryan May 22 '12 at 08:59
and call onload() function at body – Bryan May 22 '12 at 09:01
not yet test with your solution disabled="disabled" on my Ipad, let me try it tomorrow – Bryan May 22 '12 at 10:34

score 0 · Answer 4 · answered Jan 29 '14 at 15:58

0

The right answer tends to be the simplest one.

readonly="true"

Is the solution

answered Jan 29 '14 at 15:58

Div Pixel

1

this is the same as the other answer with even less explanation - not down voting it as you're new to SO but you should read the help etc - SO is not a forum. – byronyasgur Jun 17 '15 at 11:50

Ipad + How to prevent the keyboard from popping up on jquery datepicker

4 Answers4

Linked