prevent mobile default keyboard when focusing an <input> from showing

Asked 2011-09-30T13:03:26.587

110

this is how i'm trying

<script type="text/javascript">
  $(document).ready(function(){
    $('#dateIn,#dateOut').click(function(e){
      e.preventDefault();
    }); 
  });
</script>

but the input stills 'launching' iphone's keyboard

ps: i want to do this because i'm using datepicker plugin for date

Edit Report

2 Answers

249

By adding the attribute readonly (or readonly="readonly") to the input field you should prevent anyone typing anything in it, but still be able to launch a click event on it.

This is also usefull in non-mobile devices as you use a date/time picker

answered 2011-09-30T13:16:53.307

You can add a callback function to your DatePicker to tell it to blur the input field before showing the DatePicker.

$('.selector').datepicker({
   beforeShow: function(){$('input').blur();}
});

Note: The iOS keyboard will appear for a fraction of a second and then hide.

answered 2011-11-10T05:34:05.140

prevent mobile default keyboard when focusing an <input> from showing

2 Answers

Your Answer