1

Issue: I have a text input and a button (binding with knockout). Inside knockout click event I have a jquery focus which is working on any desktop but on any ios devices.

HTML:

 <input class="form-control" type="text" id="SearchInput" data-bind="textInput:SearchInput" />
 <input type="button" data-bind="click:BtnClicked ">

Model:

 $('#SearchInput').on('touchstart', function (e) {
      // It shows that we get here 
      $("p").text("I am here in touchstart");
      $(this).focus();                 
 });

/////

 self.BtnClicked = function (){
   $("#SearchInput").trigger('touchstart');
 }

It works on any Android devices but it is not working on any ios devices (the latest Safari & Chrome). It goes inside touchstart binding where I see <p> is getting set with new text but no luck to make it work on an ipad. I've also tried both -webkit-user-select: none; and -webkit-user-select: text; still not working.

Mark.Ben
  • 213
  • 2
  • 10
  • Why are you trying to trigger `touchstart` from the button? – Michael Best Nov 18 '16 at 00:42
  • Will it make sense to put `$(this).focus();` inside of `self.BtnClicked` ? – gkb Nov 18 '16 at 11:17
  • @MichaelBest there is an ajax call inside the click event for that button which in success I want the text input gets focus programmatically. After some research it seems I need to bind `touchstart` first and then trigger it later in order to make it work on `ios` devices. – Mark.Ben Nov 18 '16 at 14:53
  • @gkb inside of self.BtnClicked `$(this)` does not point to the text input and beside even if we select `$(#SearchInput)` it will defiantly work on any non-touch devices. There are some scenarios that OS on touch screen device does (ex.detecting double tap for zoom ..) and therefore it is different from desktop – Mark.Ben Nov 18 '16 at 14:56
  • Have you tried using the `hasFocus` knockout binding instead? – Michael Best Nov 18 '16 at 19:25
  • @MichaelBest yes I've tried `data-bind="textInput:SearchInput,hasFocus:GetFocus"` then inside `touchstart` I'd set `GetFocus` to true. But again it was only working on desktop and any Andriod device. It so bizarre ! – Mark.Ben Nov 18 '16 at 19:42
  • What is the point of using `touchstart`? Why not just update `GetFocus` in your `click` handler? – Michael Best Nov 21 '16 at 22:16
  • @MichaelBest As I explained by only updating `GetFocus` it does work on any desktop but does not work on any touch device browsers. (I guess Apple doesn't want the keyboard to appear except on user demand).http://stackoverflow.com/questions/6287478/mobile-safari-autofocus-text-field/7332160#7332160 – Mark.Ben Nov 21 '16 at 22:57
  • @MichaelBest this link shows you that focus is working on a desktop but not on an ipad https://jsfiddle.net/kyr6w2x3/126/ try it with an ipad or iphone if you have – Mark.Ben Nov 21 '16 at 23:07
  • According to this: https://www.quora.com/Mobile-Safari-iPhone-or-iPad-with-JavaScript-how-can-I-launch-the-on-screen-keyboard/answer/Han-Wei, `.focus()` won't work in Mobile Safari within `setTimeout`. Try http://jsfiddle.net/DLV2F/2/ – Michael Best Nov 22 '16 at 00:42

0 Answers0