using html textarea – issues with Chome (windows) but not with Firefox

I have this code in an HTML page:

 <textarea id="exwords" name="exwords" rows="11" cols="40"               
   style="font-family:Courier;pre-wrap"                                  
   oninput="this.value = this.value.toUpperCase()"></textarea>  

If I populate the textarea with text – say ABC DEF GHI JKL MNO and the go back and try to change ABC to ABC123 the 1 will enter after the C but the 23 will enter after MNO.

Again this occurs with Google Chrome on Windows 11 Version 117.0.5938.63 which I updated to this morning without a change in this issue.

If I try with the latest Firefox on the same Windows system the 123 is entered after the ABC as one would expect.

I’m not sure where to go now – looking for advice.

>Solution :

It seems like you’re encountering an issue with how Google Chrome and Firefox handle the oninput event for a textarea when you try to change the text. In your case, you want the text to be converted to uppercase as you type, but you’re experiencing unexpected behavior in Chrome.

To ensure consistent behavior across different browsers, you can modify your code as follows:

<textarea id="exwords" name="exwords" rows="11" cols="40"
   style="font-family: Courier; white-space: pre-wrap;"
   oninput="this.value = this.value.toUpperCase();"></textarea>

I made two changes to your code:

1. I added white-space: pre-wrap; to the inline style. This CSS property ensures that whitespace, including newline characters, is preserved in the textarea, similar to pre-wrap in the style attribute.

2. I moved the oninput attribute to the textarea element directly to keep the event handler consistent across browsers.

By making these changes, you should have a consistent experience in both Chrome and Firefox when entering and modifying text in the textarea.