Кросс-браузер "перейти к" / "прокрутка" текстовой области

Question

У меня есть текстовая область со многими строками ввода, и происходит событие JavaScript, которое требует прокрутки текстовой области до строки 345.

scrollTop вроде делает то, что я хочу, за исключением того, насколько я могу сказать, что это уровень пикселей, и я хочу что-то, что работает на линейном уровне. Что еще усложняет то, что, опять же, опять же, невозможно сделать текстовые поля не переносами строк.

Answer 1

Вы можете остановить перенос с помощью атрибута wrap. Он не является частью HTML 4, но большинство браузеров поддерживают его.
Вы можете вычислить высоту линии, разделив высоту области на количество строк.

<script type="text/javascript" language="JavaScript">
function Jump(line)
{
  var ta = document.getElementById("TextArea");
  var lineHeight = ta.clientHeight / ta.rows;
  var jump = (line - 1) * lineHeight;
  ta.scrollTop = jump;
}
</script>

<textarea name="TextArea" id="TextArea" 
  rows="40" cols="80" title="Paste text here"
  wrap="off"></textarea>
<input type="button" onclick="Jump(98)" title="Go!" value="Jump"/>

Проверено нормально в FF3 и IE6.

Answer 2

Если вы используете .scrollHeight вместо .clientHeight, он будет работать правильно для текстовых областей, которые отображаются с ограниченной высотой и полосой прокрутки:

<script type="text/javascript" language="JavaScript">
function Jump(line)
{
  var ta = document.getElementById("TextArea");
  var lineHeight = ta.scrollHeight / ta.rows;
  var jump = (line - 1) * lineHeight;
  ta.scrollTop = jump;
}
</script>

<textarea name="TextArea" id="TextArea" 
  rows="40" cols="80" title="Paste text here"
  wrap="off"></textarea>
<input type="button" onclick="Jump(98)" title="Go!" value="Jump"/>

Answer 3

Что следует учитывать при обращении к принятому ответу: возможно, вы не указали атрибут rows в своем textarea, например. вместо этого вы можете установить высоту textarea с помощью CSS.

Поэтому ссылка на ta.rows не будет работать, как указано выше (по умолчанию это 2), поэтому вместо этого вы можете получить line-height вашего textarea через currentStyle / getComputedStyle или даже .css() в jQuery. и сделайте что-то вроде следующего:

function jump(line) {
  var ta = document.getElementById("TextArea");
  var jump = line * parseInt(getStyle(ta, 'line-height'), 10);
  ta.scrollTop = jump;
}

function getStyle(el, styleProp) {
  if (el.currentStyle) {
    var y = el.currentStyle[styleProp];
  } else if (window.getComputedStyle) {
    var y = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  }
  return y;
}