Текстовые прокрутки сами по себе (на IE8) каждый раз, когда вы вводите один символ - PullRequest
Новая
       14

Текстовые прокрутки сами по себе (на IE8) каждый раз, когда вы вводите один символ

15 голосов
/ 29 мая 2010

В IE8 есть известная ошибка (на connect.microsoft.com ), из-за которой при наборе или вставке текста в элемент TEXTAREA текстовая область прокручивается сама собой. Это очень раздражает и обнаруживается на многих сайтах сообщества, включая Википедию. Воспроизведение это:

  1. откройте приведенный ниже HTML-код с помощью IE8 (или используйте любую длинную страницу в Википедии, которая будет показывать ту же проблему до тех пор, пока не исправит ее)
  2. размер браузера в полноэкранном режиме
  3. вставьте несколько страниц текста в TEXTAREA
  4. переместить полосу прокрутки в среднее положение
  5. теперь введите один символ в текстовое поле

Ожидается: ничего не происходит Фактически: прокрутка происходит сама по себе, и точка вставки заканчивается в нижней части текстовой области!

Ниже приведен репро 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, но как лучше всего обойти эту ошибку, вызывая как можно меньше побочных эффектов?

Ответы [ 3 ]

17 голосов
/ 29 мая 2010

Я потратил много времени, пытаясь найти ответ сам, поэтому решил, что избавлю других от необходимости отвечать. Хитрость заключается в том, чтобы использовать очень большое значение для атрибута 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 столбцы), IE8 запутывается при добавлении текста и прокручивает текстовую область. Если вместо этого ширина CSS меньше ширины по умолчанию, полученной из атрибута cols, то все работает нормально.

Тонкая зависимость между столбцами и шириной, возможно, и делает проблему настолько сложной для воспроизведения, потому что одна и та же страница будет разбиваться или не разрываться в зависимости от соотношения столбцов и ширины. HTML в вопросе фактически повторяет ошибку в большом окне браузера и не воспроизводит в маленьком!

2 голосов
/ 01 февраля 2011

Я думаю, что лучший способ описать эту ошибку - это то, что если вы устанавливаете ширину для текстовой области с помощью CSS, и эта ширина слишком отличается от того, что будет отображать поле COLS, IE8 показывает странную проблему с пропускающей полосой прокрутки ,

Итак, если у вас есть cols = "10" и textarea {width: 600px; }, проблема появится, потому что IE8 будет использовать ширину, вычисленную атрибутом COLS для прокрутки, вместо CSS, который переопределяет размеры.

0 голосов
/ 20 декабря 2013

Я просто хотел сказать спасибо, потому что моей репутации еще не 50, но я должен был сказать кое-что, что я потратил 4 дня на эту проблему. Обратите внимание, что это также работает для текстового поля asp.net с поддержкой многострочного. Я не шучу, я потратил 4 ДОЛГО 8 часовых дня на это, и теперь с вашим постом вы действительно помогли решить эту МЕГА БУГ ... 

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

Большое спасибо.

...