prevent iphone default keyboard when focusing an input

Question

this is how i m trying   lt script type  text javascript  gt         document  ready function                dateIn  dateOut   click function e               e preventDefault                           lt  script gt    but the input stills  launching  iphone s keyboard  ps  i want to do this because i m using datepicker plugin for date

User · Answer

I have a little generic  no keyboard  script - works for me with Android and iPhone         readonlyJim   on  focus   function              this  trigger  blur          Simply attach add class readonlyJim to the input tag and voila     Sorry too much StarTrek here

User · Answer

inputmode attribute  lt input inputmode  none  gt    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

User · Answer

Since I can t comment on the top comment  I m forced to submit an  answer    The problem with the selected answer is that setting the field to readonly takes the field out of the tab order on the iPhone   So if you like entering forms by hitting  next   you ll skip right over the field

User · Answer

Below code works for me    lt input id  myDatePicker  class  readonlyjm   gt        myDatePicker   datepicker      options             readonlyjm   on  focus  function      this  trigger  blur

User · Answer

rene-pot is correct  You will however have a not-allowed sign on the desktop version of the website  Way around this  apply the readonly  true  to a div that will show up on the mobile view only and not on desktop  See what we did here http   www naivashahotels com naivasha-hotels lake-naivasha-country-club

User · Answer

So here is my solution  similar to John Vance s answer    First go here and get a function to detect mobile browsers    http   detectmobilebrowsers com   They have a lot of different ways to detect if you are on mobile  so find one that works with what you are using   Your HTML page  pseudo code    If Mobile Then      lt input id  selling-date  type  date  placeholder  YYYY-MM-DD  max  2999-12-31  min  2010-01-01  value  2015-01-01    gt  else      lt input id  selling-date  type  text  class  date-picker  readonly  readonly  placeholder  YYYY-MM-DD  max  2999-12-31  min  2010-01-01  value  2015-01-01    gt    JQuery        date-picker    each function         var min      this   attr  min        var max      this   attr  max           this   datepicker            dateFormat   yy-mm-dd             minDate  min            maxDate  max                 This way you can still use native date selectors in mobile while still setting the min and max dates either way   The field for non mobile should be read only because if a mobile browser like chrome for ios  requests desktop version  then they can get around the mobile check and you still want to prevent the keyboard from showing up   However if the field is read only it could look to a user like they cant change the field  You could fix this by changing the CSS to make it look like it isn t read only  ie change border-color to black  but unless you are changing the CSS for all input tags you will find it hard to keep the look consistent across browsers   To get arround that I just add a calendar image button to the date picker   Just change your JQuery code a bit        date-picker    each function         var min      this   attr  min        var max      this   attr  max           this   datepicker            dateFormat   yy-mm-dd             minDate  min            maxDate  max          showOn   both           buttonImage   images calendar gif           buttonImageOnly  true          buttonText   Select date                Note  you will have to find a suitable image

User · Answer

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

User · Answer

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

User · Answer

I asked a similar question here and got a fantastic answer - use the iPhone native datepicker - it s great   How to turn off iPhone keypad for a specified input field on web page  Synopsis   pseudo-code   if small screen mobile device     set field type to  date  - e g  document getElementById  my field   type    date        input fields of type  date  invoke the iPhone datepicker   else    init datepicker - e g      my field   datepicker      The reason for dynamically setting the field type to  date  is that Opera will pop up its own native datepicker otherwise  and I m assuming you want to show the datepicker consistently on desktop browsers

User · Answer

Best way to solve this as per my opinion is Using  ignoreReadonly     First make the input field readonly then add ignoreReadonly true  This will make sure that even if the text field is readonly   popup will show       txtStartDate   datetimepicker               locale   da               format   DD MM YYYY               ignoreReadonly  true                         txtEndDate   datetimepicker               locale   da               useCurrent  false              format   DD MM YYYY               ignoreReadonly  true

[javascript] prevent iphone default keyboard when focusing an <input>

Examples related to javascript

Examples related to jquery

Examples related to iphone

Examples related to keyboard