发表新帖
发表新帖

TEXTAREAs scroll by themselves (on IE8) every time you type one character

后端 未结
关注
3 1514
感动是毒
感动是毒 2021-02-04 07:05

IE8 has a known bug (per connect.microsoft.com) where typing or pasting text into a TEXTAREA element will cause the textarea to scroll by itself. This is hugely annoying and sh

相关标签:
3条回答
  • 南方客
    2021-02-04 07:10

    I just wanted to say thank you because my reputation is not 50 yet, but I had to say something I have spent 4 days on this issue. Please note this also works for an asp.net textbox with multiline enabled. I am not kidding I spent 4 LONG 8 hour days on this and now with your post you really helped resolve this MEGA BUG...

    <asp:TextBox runat="server" TextMode="MultiLine" ID="tbxMyTextBox" ClientIDMode="static" Width="100%" Rows="4" Height="75px" MaxLength="5000"  Columns="5000" TabIndex="3"></asp:TextBox>

    Thank you so much.

    0 讨论(0)
  • 孤城傲影
    2021-02-04 07:20

    I ended up wasting a lot of time trying to figure out the answer myself, so I figured I'd save others the trouble of answering. The trick is to use a very large value for the COLS attribute on the TEXTAREA element. Like this

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<body> 
<div style="width: 80%"> 
<textarea rows="20" cols="5000" style="width:100%;" ></textarea> 
</div> 
</body> 
</html>

    I also saw a workaround online to use a non-percentage width and then a percentage max-width and min-width, but that was much less impactful than the other workaround above (courtesy of Ross) which seems to work on all browsers including IE6.

    more details: After an hour investigating this, the problem seems to be caused by IE8's handling of a conflict between "COLS" attribute and "width" style on a textarea element. If the width CSS is wider than the default width (font width x cols), IE8 gets confused when you add text and scrolls the textarea. If, instead, the width CSS is smaller than the default width derived from the cols attribute, then all works OK.

    The subtle dependence between cols and width is perhaps what makes the problem so tricky to repro, because the same exact page would break or not break depending on the ratio of cols to width. The HTML in the quesiton actually reproes the bug on a large browser window and doesn't repro on a small one!

    0 讨论(0)
  • 滥情空心
    2021-02-04 07:34

    I think the best way to describe this bug is that if you set a width for the textarea using CSS, and this width is too different from what the COLS field would render, IE8 shows the weird problem, with the skipping scroll bar.

    So, if you have cols="10" and textarea { width: 600px; }, the problem will show up because IE8 will use the width calculated by the COLS attribute for the scrolling, instead of the CSS one that's overriding the dimensions.

    0 讨论(0)
 看不清?
提交回复
热议问题