ТЕКСТАРЫ прокручиваются сами по себе (на IE8) каждый раз, когда вы вводите один символ
IE8 имеет известную ошибку (per connect.microsoft.com), где ввод текста или вставка текста в элемент TEXTAREA приведет к тому, что текстовое поле будет прокручиваться само по себе, Это очень раздражает и появляется на многих сайтах сообщества, включая Википедию. Репродукция:
- откройте HTML ниже с IE8 (или используйте любую длинную страницу в википедии, которая будет демонстрировать ту же проблему, пока не исправит ее).
- размер полноэкранного браузера.
- вставьте несколько страниц текста в TEXTAREA
- переместите полосу прокрутки в среднее положение.
- теперь введите один символ в текстовое поле
Ожидается: ничего не происходит
Фактически: прокрутка происходит сама по себе, и точка ввода заканчивается возле нижней части текстового поля!
Ниже воспроизводится HTML (также можно увидеть это в прямом эфире в Интернете здесь: http://en.wikipedia.org/w/index.php?title=Text_box&action=edit)
<!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="80" style="width:100%;" ></textarea>
</div>
</body></html>
Я знаю, что могу избежать этого, заставив веб-сайт работать в режиме совместимости с IE7, но какой лучший способ обойти эту ошибку, вызывая как можно меньше побочных эффектов?
Ответы
Ответ 1
Я в конечном итоге потратил много времени на то, чтобы самому разобраться в ответе, поэтому я решил, что избавлю других от неприятностей. Хитрость заключается в использовании очень большого значения для атрибута COLS для элемента TEXTAREA. Как этот
<!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>
Я также видел обходной путь в Интернете, чтобы использовать процентный процент width
, а затем процент max-width
и min-width
, но это было гораздо менее эффективно, чем другое обходное решение выше (любезно предоставлено Ross), которое, похоже, работает на всех браузерах, включая IE6.
более подробная информация: после часа, исследуя это, проблема, похоже, вызвана обработкой IE8 конфликта между атрибутом COLS и стилем width в элементе textarea. Если ширина CSS шире ширины по умолчанию (ширина шрифта x cols), IE8 запутывается при добавлении текста и прокручивает текстовую область. Если вместо этого ширина CSS меньше ширины по умолчанию, полученной из атрибута cols, тогда все работает нормально.
Тонкая зависимость между cols и шириной, возможно, делает проблему настолько сложной для воспроизведения, потому что одна и та же самая страница сломается или не разбивается в зависимости от отношения cols к ширине. HTML в quesiton фактически переустанавливает ошибку в большом окне браузера и не воспроизводится на маленьком!
Ответ 2
Я думаю, что лучший способ описать эту ошибку состоит в том, что если вы установите ширину для textarea с помощью CSS, и эта ширина слишком отличается от того, что будет отображать поле COLS, IE8 показывает странную проблему, с прокруткой полосы прокрутки,
Итак, если у вас есть cols = "10" и textarea {width: 600px; }, проблема покажется, потому что IE8 будет использовать ширину, вычисленную атрибутом COLS для прокрутки, вместо CSS, который переопределяет размеры.
Ответ 3
Я просто хотел сказать спасибо, потому что моя репутация еще не 50, но я должен был сказать то, что я провел 4 дня по этому вопросу. Обратите внимание, что это также работает для текстового поля asp.net с многострочной поддержкой. Я не шучу, что я провел 4 ДНЯГО 8-часовых дней на этом, и теперь с вашим сообщением вы действительно помогли решить эту ошибку MEGA...
<asp:TextBox runat="server" TextMode="MultiLine" ID="tbxMyTextBox" ClientIDMode="static" Width="100%" Rows="4" Height="75px" MaxLength="5000" Columns="5000" TabIndex="3"></asp:TextBox>
Большое вам спасибо.