CODEWITHSUNDEEP
javascriptjqueryios
germainelol
germainelol

Reputation: 3331

iOS - Workaround for manually focusing on an input/textarea

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?

Upvotes: 46

Views: 29100

Answers (5)

Yogesh Jagdale
Yogesh Jagdale

Reputation: 730

I also had similar issue. My issue solved by removing this css property i.e. -webkit-user-select:none and all worked fine.

try out this!

Upvotes: 18

Ivan Sanz Carasa
Ivan Sanz Carasa

Reputation: 1387

This seems to happen on iOS12 only. .Focus works fine in iOS11&13

Upvotes: -1

bendytree
bendytree

Reputation: 13627

WKWebView version of keyboardDisplayRequiresUserAction = NO from thedyrt/cordova-plugin-wkwebview-engine:

#import <objc/runtime.h>

- (void) viewDidLoad {
    ...

    SEL sel = sel_getUid("_startAssistingNode:userIsInteracting:blurPreviousNode:userObject:");
    Class WKContentView = NSClassFromString(@"WKContentView");
    Method method = class_getInstanceMethod(WKContentView, sel);
    IMP originalImp = method_getImplementation(method);
    IMP imp = imp_implementationWithBlock(^void(id me, void* arg0, BOOL arg1, BOOL arg2, id arg3) {
        ((void (*)(id, SEL, void*, BOOL, BOOL, id))originalImp)(me, sel, arg0, TRUE, arg2, arg3);
    });
    method_setImplementation(method, imp);
}

Upvotes: -1

Peyman
Peyman

Reputation: 1236

On your UIWebView, set keyboardDisplayRequiresUserAction to NO.

Upvotes: 11

Suman Barick
Suman Barick

Reputation: 3411

I used iPad Air [iOS 7.0.4], iPad Mini [iOS 7.1] and jQuery [1.11.3] for my test.

The .focus event worked perfectly for me both in input and textarea fields.

I am pasting the code below with which I tested. Please let me know if I am missing anything.

Is it for some previous version of iOS / jQuery ?

My HTML,

<body>
    <!--<input id="in" type="text"/>-->
    <textarea id="in"></textarea>
    <button id="btn">Add Focus</button>
</body>

My query,

$('#btn').click(function(){
    $('#in').focus();
})

Upvotes: 2

Related Questions