javascript - iOS - Workaround for manually focusing on an input/textarea

Question

So I've seen a lot of threads about the iOS issue with focusing on an input/textarea element. (See here and here) It seems that iOS will not let you manually focus on one of these elements, and requires it to be a genuine tap/click to focus on the element.

I've tried simulating a click, triggering a click, simply doing click() straight away...all sorts of things.

Here is my current workaround that I am trying to implement:

$scope.gotoElement = function(eID) {
    // call $anchorScroll()
    $scope.smoothScrollTo(eID).then(function() {
        clickElement('#textarea');
    });          
}

function clickElement(e) {
  $(e).on('touchstart', function() {
    //$(e).val('touchstart');
    $(e).focus();
  });

  $(e).trigger('touchstart');
}

You don't need to worry about the scrolling function, I know this works and I've tested that enough. The commented out $(e).val('touchstart') works with no issues to change the text of the textarea, but the .focus() does not work on iOS. I've tested this on an Android device and it works fine, but on iOS it just doesn't bring up the keyboard. Sometimes it will start to bring up the keyboard for half a second and then disappear again.

I've looked at other threads as I mentioned above, and I can't seem to figure out just how to write a workaround for this.

Any ideas?

Answer 1

I have also harassed same this like issue. my issue solved by simple one css property that is -webkit-user-select:none I removed this and all works fine. try out this.