0

I have a trouble with iOS HTML5 autocorrect. It's reproduced by JSBin http://jsbin.com/zusahev

// click - textarea loses focus - keyboard is closed
b1.addEventListener("click", function() {
  t1.value = '';
});

// touchend with preventDefault to save textarea focus
// but iOS autocorrect doesn't update current word
// how to manually trigger autocorrect update?
b2.addEventListener("touchend", function(e) {
  t2.value = '';
  e.preventDefault();
});
  1. Open example in any iOS device
  2. Enter text in the first textarea, click Button 1. Textarea loses focus
  3. Enter text in the second textarea, click Button 2. Textarea doesn't lose focus, but iOS autocorrect doesn't update own value.

I expect that after change value in textarea autocorrect suggest would be updated. How to manually trigger autocorrect update?

problem illustration

Victor
  • 3,669
  • 3
  • 37
  • 42
Alexander Sivashev
  • 83
  • 1
  • 9
  • Duplicate [Clearing input element in mobile safari with javascript does not clear the ios autocorrect buffer](https://stackoverflow.com/questions/18689842/clearing-input-element-in-mobile-safari-with-javascript-does-not-clear-the-ios-a) – Alexander Sivashev Oct 11 '17 at 13:58

2 Answers2

0

My solution is to allow textarea to lose its focus, and then focus on it again: http://output.jsbin.com/sihufuzigo

b2.addEventListener("click", function(e) {
  t2.value = '';
  t2.focus();
});

Note that iOS has limited the ability to focus() on fields programmatically: it could be done only from event handlers which are triggered by real user (real "click" event in this case) - see Mobile Safari: Javascript focus() method on inputfield only works with click? for more information

Victor
  • 3,669
  • 3
  • 37
  • 42
  • This solution is not working for me. If I do this, the keyboard will stay open and the autocorrect will not be reset. Is still still working for you now? – Tafel May 20 '22 at 10:14
  • @Tafel I cannot check, I have no iPhone anymore – Victor May 22 '22 at 13:33
0

It turned out that this is very easy to solve.

Step 1: Create a secondary input and place it outside the screen with 0 width, 0 height

Step 2: On touchEnd do preventDefault and clear contenteditable

Step 3: Move the focus to the secondary input, and then back to the main one.

As a result, this will force the keyboard to recalculate the adjustment options and you will see the correct options.

Sire IMPACTUS
  • 101
  • 2