Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

prevent iphone default keyboard when focusing an <input>

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

like image 971
Toni Michel Caubet Avatar asked Sep 30 '11 13:09

Toni Michel Caubet


People also ask

How do I keep my mobile keyboard from covering HTML input?

Adding a padding to the bottom of the page that is large enough for the keyboard enables content to be displayed as desired when the keyboard is visible.

How do you disable the input field on a mobile keyboard?

To block the mobile device keyboard from displaying you simply need to set the field to readonly with jQuery as displayed in the code below. $('#input_92_31'). attr('readonly','readonly'); Hope this helps!


2 Answers

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

like image 59
Rene Pot Avatar answered Sep 20 '22 07:09

Rene Pot


inputmode attribute

<input inputmode='none'> 

The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. It can have the following values:

none - No virtual keyboard. For when the page implements its own keyboard input control.


I am using this successfully (Tested on Chrome/Android)

CSS-Tricks: Everything You Ever Wanted to Know About inputmode

like image 36
vsync Avatar answered Sep 21 '22 07:09

vsync