Samsung mobile keyboard duplicates letters with onkeyup listener

Question

I'm writing a simple code that converts typed letters to uppercase and then refill this uppercased letters to an input element on keyup() event.

But I'm getting a confusing issue: when typing letters on my Samsung mobile (Galaxy Note 5), I get duplicated letters like the below image:

The above, I use the default Samsung keyboard with Vietnamese language and Google chrome browser. But when I try to switch the language to English, I don't see the issue.

I have some tests and here are the results:
Test 1:
Samsung keyboard + Vietnamese language
Chrome / or Samsung browser
-> the issue happens

Test 2:
Samsung keyboard + English language
Chrome / or Samsung browser
-> the issue does not happen

Test 3:
Samsung keyboard + Vietnamese language
Firefox browser
-> the issue does not happen

Test 4:
Google keyboard + Vietnamese language
Chrome / or Samsung browser
-> the issue does not happen

Here is the code:

<input type="text" id="inputText">

<script>
  document.getElementById('inputText').addEventListener('keyup', function() {
    var typedLetters = this.value;
    var upperCasedLetters = typedLetters.toUpperCase();
    this.value = upperCasedLetters;
  });
</script>

I have read a similar issue on GitHub: https://github.com/facebook/react-native/issues/11068, but I do not find yet a clear solution until now.

Can someone tell me what's going on? and How to solve this issue programmatically?

Thank you in advance!

Answer 1

Ok, I have found out how to deal with this problem by applying "password field" trick as described on https://stackoverflow.com/a/40111105/4006731.