javascript获取textarea光标选择位置和内容方法(IE, Firefox)

逃离我推掉我的手 2022-08-24 04:06 203阅读 0赞

**FROM:**http://blog.csdn.net/liujin4049/archive/2006/09/19/1244065.aspx  
  
    在网上用baidu找了很久，找到的都是IE的方法，Firefox都不能用。 而且很多要用到<textarea>.focus()方法，用起来很不方便。  
    后来转用Google，搜了下"textarea cursor"，第一个就有好方法。我根据最后一个家伙的comments，写了一个sample，应该还是挺好用的。  
原文地址：http://weblogs.asp.net/skillet/archive/2005/03/24/395838.aspx  
  
<html>  
<head>  
<title>TEST</title>  
<style>  
body,td\{  
    font-family: verdana, arial, helvetica, sans-serif;  
    font-size: 12px;  
\}  
</style>  
<script type="text/javascript">  
    var start=0;  
    var end=0;  
    function add()\{         
        var textBox = document.getElementById("ta");  
        var pre = textBox.value.substr(0, start);  
        var post = textBox.value.substr(end);  
        textBox.value = pre + document.getElementById("inputtext").value + post;  
    \}  
    function savePos(textBox)\{  
        //如果是Firefox(1.5)的话，方法很简单  
        if(typeof(textBox.selectionStart) == "number")\{  
            start = textBox.selectionStart;  
            end = textBox.selectionEnd;  
        \}  
        //下面是IE(6.0)的方法，麻烦得很，还要计算上'/n'  
        else if(document.selection)\{  
            var range = document.selection.createRange();  
            if(range.parentElement().id == textBox.id)\{  
                // create a selection of the whole textarea  
                var range\_all = document.body.createTextRange();  
                range\_all.moveToElementText(textBox);  
                //两个range，一个是已经选择的text(range)，一个是整个textarea(range\_all)  
                //range\_all.compareEndPoints()比较两个端点，如果range\_all比range更往左(further to the left)，则                //返回小于0的值，则range\_all往右移一点，直到两个range的start相同。  
                // calculate selection start point by moving beginning of range\_all to beginning of range  
                for (start=0; range\_all.compareEndPoints("StartToStart", range) < 0; start++)  
                    range\_all.moveStart('character', 1);  
                // get number of line breaks from textarea start to selection start and add them to start  
                // 计算一下/n  
                for (var i = 0; i <= start; i ++)\{  
                    if (textBox.value.charAt(i) == '/n')  
                        start++;  
                \}  
                // create a selection of the whole textarea  
                 var range\_all = document.body.createTextRange();  
                 range\_all.moveToElementText(textBox);  
                 // calculate selection end point by moving beginning of range\_all to end of range  
                 for (end = 0; range\_all.compareEndPoints('StartToEnd', range) < 0; end ++)  
                     range\_all.moveStart('character', 1);  
                     // get number of line breaks from textarea start to selection end and add them to end  
                     for (var i = 0; i <= end; i ++)\{  
                         if (textBox.value.charAt(i) == '/n')  
                             end ++;  
                     \}  
                \}  
            \}  
        document.getElementById("start").value = start;  
        document.getElementById("end").value = end;  
    \}  
</script>  
</head>  
<body>  
<form action="a.cgi">  
<table border="1" cellspacing="0" cellpadding="0">  
    <tr>  
        <td>start: <input type="text" id="start" size="3"/></td>  
        <td>end: <input type="text" id="end" size="3"/></td>  
    </tr>  
    <tr>  
        <td colspan="2">  
            <textarea id="ta" onKeydown="savePos(this)"  
                              onKeyup="savePos(this)"  
                              οnmοusedοwn="savePos(this)"  
                              οnmοuseup="savePos(this)"  
                              οnfοcus="savePos(this)"  
                              rows="14" cols="50"></textarea>  
        </td>  
    </tr>  
    <tr>  
        <td><input type="text" id="inputtext" /></td>  
        <td><input type="button" onClick="add()" value="Add Text"/></td>  
    </tr>  
</table>  
</form>  
</body>  
</html>