44

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?

Community
  • 1
  • 1
germainelol
  • 3,231
  • 15
  • 46
  • 82
  • have you try to trigger a click() instead of a focus()? i should work on any device without problem. ```$(this).next('input').click();``` – Emanuele Parisio Jun 17 '15 at 08:50
  • @EmanueleParisio Yes I have tried to put a `.click()` instead. – germainelol Jun 17 '15 at 10:32
  • we can find a work around for this , but may i ask , why would you like to focus some input programatically instead of setting a value ? – ProllyGeek Jun 22 '15 at 10:17
  • Well the problem initially came about because of an iOS bug with `position: fixed` where the input box would lose its positioning. A workaround to this I am using is that if someone taps the input box, the page will scroll to the bottom of the page and then focus on the input box bringing up the keyboard. This is a good workaround as it's for a comments list anyway. – germainelol Jun 23 '15 at 09:17
  • https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html – davidcondrey Jun 23 '15 at 09:37
  • @davidcondrey Not sure what you're suggesting as a fix, I've tried manually triggering using a touch gesture. – germainelol Jun 23 '15 at 09:39
  • Not sure but can't work on it anymore right now, off to bed. Check out this question: http://stackoverflow.com/a/7332160/1922144 may be useful. – davidcondrey Jun 23 '15 at 10:04
  • @davidcondrey I did see this post in the past thanks! – germainelol Jun 24 '15 at 02:34
  • If the app is a Cordova app I propose the following solution: http://stackoverflow.com/questions/5527639/how-can-i-focus-on-an-input-field-when-a-phonegap-page-loads – eMarine Nov 03 '15 at 16:22
  • @germainelol Have you fixed this problem? – Rohit Mar 15 '17 at 11:07
  • @Rohit Never solved this issue sorry. – germainelol Mar 16 '17 at 04:29

5 Answers5

17

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.

l2aelba
  • 21,591
  • 22
  • 102
  • 138
Yogesh Jagdale
  • 721
  • 9
  • 21
  • What would you replace it with? I haven't manually used this attribute, so what would you set `-webkit-user-select` to? – germainelol Jun 23 '15 at 09:19
  • -webkit-user-select property makes issue in ios device. This leads to unexpected behaviour of textboxes, like not getting focus correctly, some times you unable to see types characters' in textboxes, and forget if you don't have in ur css then. – Yogesh Jagdale Jun 23 '15 at 09:26
  • 1
    Yeah, I'm aware of the property itself, but as I said I haven't changed this property anywhere in my CSS. I thought you meant that changing it to `text` or something like that would fix it. – germainelol Jun 23 '15 at 09:33
  • Ok you got correct. try to change like input[type=text],textarea{-webkit-user-select:text}. If it fixed then ok else sorry :( – Yogesh Jagdale Jun 23 '15 at 10:05
  • doesn't work for me. can focus the text outside and the keyboard is still present – Slumber86 Jul 19 '16 at 17:28
12

On your UIWebView, set keyboardDisplayRequiresUserAction to NO.

Luke
  • 11,426
  • 43
  • 60
  • 69
Peyman
  • 1,228
  • 10
  • 13
2

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();
})
Suman Barick
  • 3,311
  • 2
  • 19
  • 31
  • 2
    I'm sorry but this doesn't work, this is pretty much exactly what I have written above. If you look at the related questions that I posted you can look at further examples of this. – germainelol Jun 17 '15 at 10:31
  • @germainelol, Yeah, I saw... sorry about that... but May I know your iOS version? – Suman Barick Jun 17 '15 at 16:10
  • I am using the latest version, but as far as I know this bug has been around for quite a while. – germainelol Jun 18 '15 at 03:30
0

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);
}
bendytree
  • 13,095
  • 11
  • 75
  • 91
0

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

Ivan Sanz Carasa
  • 1,141
  • 8
  • 16