text area cursor jumps to top when focus lost IE8

Question

I have a standard text area with a lot of content which shows overflow, when I lose focus on this text area by either clicking out or tabbing out of the text box the cursor within the text box jumps to the top.

Plus when I stop typing the same occurs

Is there any way to prevent this with jquery or another means? I am unsure if it is a bug in IE8 but this is a client request.

Thanks in advance

This would appear not to be standard behaviour. Do you have any events linked to the `blur` event for the textarea? — Rory McCrossan, Oct 26 '12 at 08:31
This is a recognised bug in IE8, and has been asked multiple times, for example [here](http://stackoverflow.com/questions/2933320/), [here](http://stackoverflow.com/questions/11080270) and [here](http://stackoverflow.com/questions/3280247) — freefaller, Oct 26 '12 at 08:39
No, not that I'm aware of... plus are you going to require every single person who sees your page (assuming it's not an intranet) to install the patch? I will write an answer to give some helpers — freefaller, Oct 26 '12 at 08:41
Blimey @CR41G14, that was a quick "accepted answer tick"... what did you use to fix your issue? — freefaller, Oct 26 '12 at 08:54

score 4 · Accepted Answer · edited May 23 '17 at 12:27

This is a recognised bug in IE8, but there is no patch/hotfix available that I'm aware of (plus, even if there was, there is no guarantee the computer viewing your page has the patch/hotfix in place).

This happens on textboxes which are using a percentage width, rather than fixed width, and there are several recorded "fixes", although not all worked for me...

Firstly there is the option of fixing the width of the textarea via CSS, but also using min-width and max-width to set the percentage (however, this isn't going to work in old browsers). This could not work for me because the sheer number of textareas I use that all need different widths.

textarea {
  width: 700px;
  min-width: 100%;
  max-width: 100%;
}

Here is an article from somebody who originally found the bug, with an explanation of the above.

Secondly, you could try setting the number of columns to be much, much larger than the visual size of the textbox. Here is an answer giving details of how to do this, and why they think this is the problem. However, I couldn't actually get this to work, despite it being the accepted answer with several up-votes.

In the end I choose to force IE8 into using compatibility mode using the following meta tag at the very start of each page (I use ASP.NET master-pages, so this wasn't a big job).

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This will also made the "compatibility" button disappear, so it's impossible for your users to accidentally put it back into IE8 mode.

This worked for me whereas Justin Grant's "cols" strategy did not. — zachelrath, May 09 '13 at 17:03
I had to add a fixed height for the textarea to stop the erratic jumping. — Till Helge, Jul 03 '14 at 13:13

text area cursor jumps to top when focus lost IE8

1 Answers1