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!

score 0 · Answer 1 · answered Aug 31 '19 at 07:31

0

Why not use text-transform: uppercase; ?? Pure CSS solution.

input {
  text-transform: uppercase;
}

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

answered Aug 31 '19 at 07:31

Nidhin Joseph

9,981
4
26
48

because it simply does not fit my requirement, the above is just a piece of my code, there are other things that need to be processed after that – KaiD Aug 31 '19 at 07:46
if so, you need to have more details in your post. The post seem to be saying you have an issue getting characters from lower to uppercase. This is a typical [XYProblem](http://xyproblem.info/) – Nidhin Joseph Aug 31 '19 at 07:48
adding to this, no matter what the logic is, uppercasing is a UI representation, which you can achieve through CSS. It's best recommended not to overcomplicate your code. [KISS](https://en.wikipedia.org/wiki/KISS_principle) – Nidhin Joseph Aug 31 '19 at 07:50
CSS solution does not keep transform (uppercase) when submitted in the form as one of my requirements – KaiD Aug 31 '19 at 07:56
because this issue is hard to recreate, the alternate solution is to convert the value before submit to uppercase. – Nidhin Joseph Aug 31 '19 at 07:57
thanks, but that solution is not what i am looking for – KaiD Aug 31 '19 at 08:01
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198758/discussion-between-nidhin-joseph-and-kaid). – Nidhin Joseph Aug 31 '19 at 08:09

score 0 · Accepted Answer · answered Oct 13 '19 at 17:57

0

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.

answered Oct 13 '19 at 17:57

KaiD

111
5

score 0 · Answer 3 · answered Jan 29 '20 at 22:17

I found that autocapitalize solved the problem for me:

<input id="input" type="search" autocomplete="off" autocorrect="off" autocapitalize="characters" spellcheck="false" placeholder="Enter Text"/>

This essentially turned on the caps lock of the keyboard. Placeholder text remained as written (caps and lower), the caps weren't a "trick of the eye" like the CSS text-transform approach, and is MUCH simpler than the password field hack.

Samsung mobile keyboard duplicates letters with onkeyup listener

3 Answers3