Textarea text selection problem in Firefox

Giganews Newsgroups
Subject: Textarea text selection problem in Firefox
Posted by:  Mark Szlazak (mszlaz…@aol.com)
Date: 7 Mar 2005

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').scrollHeight - 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').scrollHeight
/ lineHeight); i++)
        str += '<br>';
    str += "<\/div>";
    document.write(str);
}
</script>
</body>
</html>

Replies