Entry
How do I select a line in a textarea with Mozilla?
Nov 29th, 2004 10:33
Martin Honnen,
Mozilla (starting with 1.3) and that way Netscape 7.1/7.2 and Firefox
have the method setSelectionRange for textarea controls so all you need
to do is use regular expressions to find the right line in the textarea
content and position the selection on it.
Here is an example that has been tested with Netscape 7.2 and Mozilla
1.7.3 but should work with older Mozilla/Netscape versions as stated above.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>selecting a line in a textarea in Mozilla</title>
<script type="text/javascript">
function selectLine (textarea, lineNumber) {
var text = textarea.value;
lineNumber = Number(lineNumber);
var linePattern = /.*(\r\n|\r|\n)/g;
linePattern.lastIndex = 0;
var lineStart = 0;
var lineEnd = 0;
var lineMatch;
var lineFound = 0;
var found = false;
while ((lineMatch = linePattern.exec(text))) {
lineFound++;
lineStart = lineMatch.index;
lineEnd = lineStart + lineMatch[0].length;
if (lineFound == lineNumber) {
found = true;
break;
}
}
if (found) {
if (textarea.setSelectionRange) {
textarea.scrollTop = Math.floor(textarea.scrollHeight /
countLines(text) * (lineNumber - 1));
textarea.setSelectionRange(lineStart, lineEnd);
}
}
}
function countLines (text) {
var linePattern = /.*(\r\n|\r|\n)/g;
linePattern.lastIndex = 0;
var lineCount = 0;
var match, index, matchText;
while ((match = linePattern.exec(text))) {
lineCount++;
index = match.index;
matchText = match[0];
}
if (index + matchText.length < text.length) {
lineCount++;
}
return lineCount;
}
</script>
</head>
<body>
<form action="">
<p>
<label>
example textarea:
<br>
<textarea name="textareaName" rows="10" cols="80">
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
</textarea>
</label>
</p>
<p>
<label>line number:
<select name="lineNumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</label>
<input type="button"
value="select line"
onclick="selectLine(this.form.elements.textareaName,
this.form.elements.lineNumber.value);">
</p>
</form>
</body>
</html>
What I haven't checked is whether scrolling to the right line works
correctly if text zoom is not at 100%.
