无法在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)

Answer 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 .