JavaScript可不可以记录焦点的位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <textarea id="ta" style="width:400px;height:250px;">
            123456789
        </textarea>
        <br/>
        <input type="button" unselectable="on" value="inp" onclick="ta.focus();" />
    </body>
</html>

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script> 
      var currentPos = 0;  //用来保存光标位置
     function setCaret(id)//用来设置光标位置
     {
    　　var textbox = document.all(id);
    　　var r = textbox.createTextRange();
    　　r.collapse(true);
    　　r.moveStart('character',currentPos);
    　　r.select();
     } 
      
      function getPos(obj)//用来获取光标位置
    　{
    　　obj.focus();
    　　var workRange=document.selection.createRange();
    　　obj.select();
    　　var allRange=document.selection.createRange();
    　　workRange.setEndPoint("StartToStart",allRange);
    　　var len=workRange.text.length;
    　　workRange.collapse(false);
    　　workRange.select();
    　　currentPos=len;
    　} 
    </script> 
    </head>
    <body>
       <textarea id="ta" style="width:400px;height:250px;" onclick="getPos(this)">123456789</textarea>
       <br />
       <input type="button" unselectable="on" value="inp" onclick="setCaret('ta')"/>
    </body>
    </html>
    试一试吧. ：-）
      

  2.   

    <html>
        <head>
            <title>TEST</title>
            <style>
                body, td {
                    font-family: verdana, arial, helvetica, sans-serif;
                    font-size: 12px;
                }
            </style>
            <script type="text/javascript">
                var iStart = 0;
                var iEnd = 0;            function savePos(oTextBox){
                    //Firefox(
                    if (typeof(oTextBox.selectionStart) == "number") {
                        iStart = oTextBox.selectionStart;
                        iEnd = oTextBox.selectionEnd;
                    }
                    else {
                        if (document.selection) {
                            var range = document.selection.createRange();
                            if (range.parentElement().id == oTextBox.id) {
                                var range_all = document.body.createTextRange();
                                range_all.moveToElementText(oTextBox);
                                for (iStart = 0; range_all.compareEndPoints("StartToStart", range) < 0; iStart++) 
                                    range_all.moveStart('character', 1);
                                for (var i = 0; i <= iStart; i++) {
                                    if (oTextBox.value.charAt(i) == '\n') 
                                        iStart++;
                                }
                                var range_all = document.body.createTextRange();
                                range_all.moveToElementText(oTextBox);
                                for (iEnd = 0; range_all.compareEndPoints('StartToEnd', range) < 0; iEnd++) 
                                    range_all.moveStart('character', 1);
                                for (var i = 0; i <= iEnd; i++) {
                                    if (oTextBox.value.charAt(i) == '\n') 
                                        iEnd++;
                                }
                            }
                        }
                    }
                }
                
                function textboxSelect(oTextbox, iStart, iEnd){
                    alert(iStart);
                    alert(iEnd);
                    switch (arguments.length) {
                        case 1:
                            oTextbox.select();
                            break;
                            
                        case 2:
                            iEnd = oTextbox.value.length;
                        /* falls through */
                        
                        case 3:
                            if (document.all) { //isIE
                                var oRange = oTextbox.createTextRange();
                                oRange.moveStart("character", iStart);
                                oRange.moveEnd("character", -oTextbox.value.length + iEnd);
                                oRange.select();
                            }
                            else 
                                if (isMoz) {
                                    oTextbox.setSelectionRange(iStart, iEnd);
                                }
                    }
                    
                    oTextbox.focus();
                }

            </script>
        </head>
        <body>
            <textarea id="ta" onclick="savePos(this);" onmousedown="savePos(this);" onmouseup="savePos(this);"
     onkeydown="savePos(this);" onkeyup="savePos(this);" style="width:400px;height:250px;">123456789</textarea>
            <br>
            <input type="button" unselectable="on" value="inp" onclick="textboxSelect(ta,iStart,iEnd);"/>
        </form>
        </body>
    </html>