Categories
discuss

Cross browser “jump to”/”scroll” textarea

I have a textarea with many lines of input, and a JavaScript event fires that necessitates I scroll the textarea to line 345. scrollTop sort of does what I want, except as far as I can tell it’s …

I have a textarea with many lines of input, and a JavaScript event fires that necessitates I scroll the textarea to line 345.

scrollTop sort of does what I want, except as far as I can tell it’s pixel level, and I want something that operates on a line level. What also complicates things is that, afaik once again, it’s not possible to make textareas not line-wrap.

Answer

You can stop wrapping with the wrap attribute. It is not part of HTML 4, but most browsers support it.
You can compute the height of a line by dividing the height of the area by its number of rows.

<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"/>

Tested OK in FF3 and IE6.

Source: stackoverflow
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Privacy Policy, and Copyright Policy. Content is available under CC BY-SA 3.0 unless otherwise noted. The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 © No Copyrights, All Questions are retrived from public domain..