By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,694 Members | 1,294 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,694 IT Pros & Developers. It's quick & easy.

Textarea text selection problem in Firefox

P: n/a
The following code fails in Firefox to get at selected text in the
right-side textarea. Any help would be appreciated.

<html>
<head>
<script>
var agt = navigator.userAgent.toLowerCase();
var safari = ((agt.indexOf('safari') != -1) && (agt.indexOf('mac') !=
-1))? true:false;
var opera = (window.opera)? true:false;
var ie = (document.all && !safari && !opera)? true:false;
var moz = (document.getElementById && !safari && !opera && !ie)?
true:false;

var i, str, lineHeight = 16;

function setScrollBar (ta, sb) {
var textareaBorderWidth = 2;
sb.style.left = ta.offsetParent.offsetParent.offsetLeft +
ta.offsetParent.offsetLeft + ta.offsetLeft + ta.clientWidth +
textareaBorderWidth + 1;
sb.style.top = ta.offsetParent.offsetParent.offsetTop +
ta.offsetParent.offsetTop + ta.offsetTop + textareaBorderWidth;
sb.style.height = ta.clientHeight;
sb.style.width = 16;
}

function syncScrollBars (sb1, sb2, ta1, ta2) {
sb1.onscroll = function() {
ta1.scrollTop = this.scrollTop;
ta2.scrollTop = this.scrollTop;
sb2.scrollTop = this.scrollTop;
}
sb2.onscroll = function() {
ta1.scrollTop = this.scrollTop;
ta2.scrollTop = this.scrollTop;
sb1.scrollTop = this.scrollTop;
}
}

function syncTextareas (ta1, ta2) {
ta1.onscroll = function (evt) {
ta2.scrollTop = this.scrollTop;
}
ta2.onscroll = function (evt) {
ta1.scrollTop = this.scrollTop;
}
}
onload = function () {
if (!moz) syncTextareas (document.getElementById('ta1'),
document.getElementById('ta2'));
else {
syncScrollBars (document.getElementById('sb1'),
document.getElementById('sb2'), document.getElementById('ta1'),
document.getElementById('ta2'));
setScrollBar(document.getElementById('ta1'),
document.getElementById('sb1'));
setScrollBar(document.getElementById('ta2'),
document.getElementById('sb2'));
}
}
</script>
</head>
<body>
<form name="f">
<table border=0 cellpadding=0 cellspacing=0>
<tr valign="top">
<td>
<textarea id="ta1" rows=10 cols=40>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</textarea>
</td>
<td>&nbsp;</td>
<td>
<textarea id="ta2" rows=5 cols=40>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</textarea>
<input type="button" value="show selection"
onclick="var ta = this.form.ta2;
if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == ta)
alert(range.text);
}
else if (ta.selectionStart)
alert(ta.value.substring(ta.selectionStart, ta.selectionEnd));
else alert('no selection detected');"

</td>
</tr>
<tr>
</table>
</form>

<script>
if (moz) {
str = "<div id=\"sb1\" style=\"position: absolute; overflow:
auto;\">";
for (i = 0; i <
Math.round((document.getElementById('ta1').scrollH eight - 70) /
lineHeight); i++)
str += '<br>';
str += "<\/div>";
str += "<div id=\"sb2\" style=\"position: absolute; overflow:
auto;\">";
for (i = 0; i < Math.round(document.getElementById('ta2').scrollHe ight
/ lineHeight); i++)
str += '<br>';
str += "<\/div>";
document.write(str);
}
</script>
</body>
</html>

Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
There seems to be a problem with selectionStart when selections include
the first character position of the first line of the textarea. If you
start your selection at any point after that then things work fine. One
could add a space to the beginning of the test then make selections
that start any place after that but then you loose the ability to use
"select all". Does anyone know what going on with this? Here's a
smaller sample script with the same issue.

<html>
<head>
</head>
<body>
<form name="F">
<textarea name="TA" rows="5" cols="40">
Textarea text selection test.
Test for textarea text selection.
</textarea>
<input type="button" value="show selection"
onclick="var ta = this.form.TA;
if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == ta)
alert(range.text);
}
else if (ta.selectionStart)
alert(ta.value.substring(ta.selectionStart, ta.selectionEnd));"

</form>
</body>
</html>

Jul 23 '05 #2

P: n/a
Never mind I found the problem! Changing my code from
"if (ta.selectionStart)"
to
"if (ta.selectionEnd - ta.selectionStart)"
solves the issue.

Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.