Mobile Safari Javascript focus method on inputfield only works with click

Question

I have a simple input field like this    lt div class  search  gt      lt input type  text  value  y u no work   gt   lt  div gt     And I m trying to focus   it inside a function  So inside of a random function  doesn t matter what function it is  I have this line          search   find  input   focus      This works just fine on every Desktop whatsoever   However it doesn t work on my iPhone  The field is not getting focused and the keyboard is not shown on my iPhone   For testing purposes and to show you guys the problem I did a quick sample       some-test-element   click function           search   find  input   focus       works well on my iPhone - Keyboard slides in      setTimeout function         alert  test      works       search   find  input   focus       doesn t work on my iPhone - works on Desktop    5000      Any idea why the focus   wouldn t work with the timeout function on my iPhone   To see the live example  test this fiddle on your iPhone  http   jsfiddle net Hc4sT   Update   I created the exact same case as I m currently facing in my current project   I have a select-box that should     when  changed      set the focus to the input field and slide-in the kexboard on the iphone or other mobile devices  I found out that the focus   is set correctly but the keyboard doesn t show up  I need the keyboard to show up

User · Answer

I faced the same issue recently  I found a solution that apparently works for all devices  You can t do async focus programmatically but you can switch focus to your target input when some other input is already focused  So what you need to do is create  hide  append to DOM  amp  focus a fake input on trigger event and  when the async action completes  just call focus again on the target input  Here s an example snippet - run it on your mobile   edit   Here s a fiddle with the same code  Apparently you can t run attached snippets on mobiles  or I m doing something wrong     x000D   x000D  var  triggerCheckbox       trigger-checkbox    x000D  var  targetInput       target-input    x000D   x000D     Create fake  amp  invisible input x000D  var  fakeInput       lt input type  text    gt    x000D     css   x000D      position   absolute   x000D      width   targetInput outerWidth       zoom properly  iOS  x000D      height  0     hide cursor  font-size  0 will zoom to quarks level   iOS  x000D      opacity  0     make input transparent    x000D        x000D   x000D  var delay   2000     That s crazy long  but good as an example x000D   x000D   triggerCheckbox on  change   function event    x000D       Disable input when unchecking trigger checkbox  presentational purpose  x000D    if   event target checked    x000D      return  targetInput x000D         attr  disabled   true  x000D         attr  placeholder    I m disabled    x000D      x000D   x000D       Prepend to target input container and focus fake input x000D     fakeInput prependTo   container   focus    x000D   x000D       Update placeholder  presentational purpose  x000D     targetInput attr  placeholder    Wait for it       x000D   x000D       setTimeout  fetch or any async action will work x000D    setTimeout function     x000D   x000D         Shift focus to target input x000D       targetInput x000D         attr  disabled   false  x000D         attr  placeholder    I m alive    x000D         focus    x000D   x000D         Remove fake input - no need to keep it in DOM x000D       fakeInput remove    x000D       delay   x000D      x000D  label   x000D    display  block  x000D    margin-top  20px  x000D    x000D   x000D  input   x000D    box-sizing  border-box  x000D    font-size  inherit  x000D    x000D   x000D   container   x000D    position  relative  x000D    x000D   x000D   target-input   x000D    width  250px  x000D    padding  10px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt div id  container  gt  x000D     lt input type  text  id  target-input  placeholder  I m disabled    gt  x000D   x000D     lt label gt  x000D       lt input type  checkbox  id  trigger-checkbox    gt  x000D      focus with setTimetout x000D      lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Please try using on-tap instead of ng-click event  I had this issue  I resolved it by making my clear-search-box button inside search form label and replaced ng-click of clear-button by on-tap  It works fine now

User · Answer

A native javascript implementation of WunderBart s answer  function onClick           create invisible dummy input to receive the focus first   const fakeInput   document createElement  input     fakeInput setAttribute  type    text     fakeInput style position    absolute    fakeInput style opacity   0   fakeInput style height   0   fakeInput style fontSize    16px     disable auto zoom       you may need to append to another element depending on the browser s auto       zoom scroll behavior   document body prepend fakeInput        focus so that subsequent async focus will work   fakeInput focus      setTimeout      gt            now we can focus on the target input     targetInput focus           cleanup     fakeInput remove             1000      Other References  Disable Auto Zoom in Input  quot Text quot  tag - Safari on iPhone

User · Answer

This solution works well  I tested on my phone   document body ontouchend   function     document querySelector   name  name     focus           enjoy

User · Answer

UPDATE  I also tried this  but to no avail     document  ready function        body  not  wr-dropdown    bind  click   function e            test   focus           wr-dropdown   on  change   function e        if      wr-dropdow option value   search                setTimeout function e                   body  not  wr-dropdown    trigger  click              3000                              I am confused as to why you say this isn t working because your JSFiddle is working just fine  but here is my suggestion anyway     Try this line of code in your SetTimeOut function on your click event   document myInput focus      myInput correlates to the name attribute of the input tag     lt input name  myInput  gt    And use this code to blur the field   document activeElement blur

User · Answer

I have a search form with an icon that clears the text when clicked   However  the problem  on mobile  amp  tablets  was that the keyboard would collapse hide  as the click event removed focus was removed from the input      Goal  after clearing the search form  clicking tapping on x-icon  keep the keyboard visible   To accomplish this  apply stopPropagation   on the event like so    function clear   event         event preventDefault         event stopPropagation        self query            timeout function              document getElementById  sidebar-search   focus           1       And the HTML form     lt form ng-controller  SearchController as search      ng-submit  search submit  event   gt           lt input type  search  id  sidebar-search               ng-model  search query  gt                   lt span class  glyphicon glyphicon-remove-circle                      ng-click  search clear  event   gt                   lt  span gt   lt  form gt

User · Answer

Try this  input focus    input scrollIntoView

User · Answer

I managed to make it work with the following code   event preventDefault    timeout function           inputToFocus focus       500     I m using AngularJS so I have created a directive which solved my problem   Directive   angular module  directivesModule   directive  focusOnClear           timeout       function  timeout            return               restrict   A               link  function  scope  element  attrs                    var id   attrs focusOnClear                  var  inputSearchElement     element  parent   find       id                   element on  click   function  event                        event preventDefault                        timeout function                               inputSearchElement focus                           500                                                            How to use the directive    lt div gt       lt input type  search  id  search  gt       lt i class  icon-clear  ng-click  clearSearchTerm    focus-on-clear  search  gt  lt  i gt   lt  div gt    It looks like you are using jQuery  so I don t know if the directive is any help

User · Answer

Actually  guys  there is a way  I struggled mightily to figure this out for  LINK REMOVED   try it on an iPhone or iPad    Basically  Safari on touchscreen devices is stingy when it comes to focus  ing textboxes  Even some desktop browsers do better if you do click   focus    But the designers of Safari on touchscreen devices realized it s annoying to users when the keyboard keeps coming up  so they made the focus appear only on the following conditions   1  The user clicked somewhere and focus   was called while executing the click event  If you are doing an AJAX call  then you must do it synchronously  such as with the deprecated  but still available    ajax  async false   option in jQuery   2  Furthermore -- and this one kept me busy for a while -- focus   still doesn t seem to work if some other textbox is focused at the time  I had a  Go  button which did the AJAX  so I tried blurring the textbox on the touchstart event of the Go button  but that just made the keyboard disappear and moved the viewport before I had a chance to complete the click on the Go button  Finally I tried blurring the textbox on the touchend event of the Go button  and this worked like a charm   When you put  1 and  2 together  you get a magical result that will set your login forms apart from all the crappy web login forms  by placing the focus in your password fields  and make them feel more native  Enjoy

[javascript] Mobile Safari: Javascript focus() method on inputfield only works with click?

Examples related to javascript

Examples related to jquery

Examples related to iphone

Examples related to input

Examples related to focus