12

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

1
  • 1
    yes, only set attribute readonly, it's ok
    – Bryan
    May 22, 2012 at 9:03

4 Answers 4

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.

2
  • lastime I already used readonly="true" but data can not save to the Database
    – Bryan
    May 22, 2012 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, 2014 at 16:15
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 !

1
  • 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. Nov 20, 2014 at 23:22
0

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

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

The right answer tends to be the simplest one.

readonly="true"

Is the solution

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. Jun 17, 2015 at 11:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.