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

Answer 1

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 !

Answer 2

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.