Can not focus newly created element on ipad

Question

I have a part of code, where I create new elements on the fly and make them focusable.

The code is more complex, but here is a reproducible part on jsfiddle (when you click enter the next element is created and then focus is assigned to it):

$("body").on( "keypress", ".field", function(e) {
  if ( e.keyCode  == 13 ) {
      $(this).after('<p class="field" contenteditable="true"><br></p>')
      $(this).next().focus();
      e.stopPropagation();
      e.preventDefault();
  }
});

This works as expected in desktop browsers, but it failed to focus the next element on ipad (and may be on iphone)

FWIW your fiddle works fine on iPhone 4 iOS7 Safari. I don't have an iPad to test with. — pabo, Sep 04 '14 at 19:13
Actually, I tested this on iOS simulator in Xcode and it works fine in iOS 7.1, iPad... — pabo, Sep 04 '14 at 19:33
have you tried adding a delay between the element creation and focus? — 0e4ef622, Sep 07 '14 at 02:38
@kid yes, I thought that setTimeout can solve the problem, but it did not work. — Salvador Dali, Sep 07 '14 at 03:16

score -1 · Answer 1 · edited May 23 '17 at 11:57

-1

Apparently IOS/Safari only "accepts" the focus when inside a touch event handler. I triggered a touch event and inserted the .focus() inside it. I tried this on my iPhone3S/Safari and it works:

Demo.

Actual Stackoverflow question.

edited May 23 '17 at 11:57

Community

1
1

answered Sep 01 '14 at 07:47

user3995789

3,452
1
19
35

I tried the same solution for my case and I failed. – Salvador Dali Sep 01 '14 at 08:06

Can not focus newly created element on ipad

1 Answers1