setSelectionRange()函数-只支持Firefox浏览器-设置文本框某段文字的光标选中

例如页面上有一个文本输入框：

<input type="text" id="txt" value="abcdefghijklmn"/>

则，设置该文本框中的最后三个字符光标选中：

var o = document.getElementById("txt");

var len = o.value.length;

o.focus();          //先使光标聚集在输入框中

o.setSelectionRange(len-3,len);

 

//获取光标起始位置

         if (textarea.setSelectionRange) {
             pos = textarea.selectionStart;
         }

 

function locatePoint(){
var aCtrl = document.getElementById("txtContent");
if (aCtrl.setSelectionRange) {
setTimeout(function() {
aCtrl.setSelectionRange(0, 0); //将光标定位在textarea的开头，需要定位到其他位置的请自行修改
aCtrl.focus();
}, 0);
}else if (aCtrl.createTextRange) {
var textArea=document.getElementById("txtContent");
var tempText=textArea.createTextRange();
tempText.moveEnd("character",0-tempText.text.length);
tempText.select();
}
}
详细出处参考：http://www.jb51.net/article/26527.htm

 

 

 

通过 JavaScript 获取和设置光标在输入框中的位置（兼容 IE 及 Firefox）

2011-12-27 15:22:23      我来说两句 

收藏    我要投稿    [字体： 小 大]

function getLocation(elm) { 
    if(elm.createTextRange) { // IE              
        var range = document.selection.createRange();                
        range.setEndPoint('StartToStart', elm.createTextRange());                
        return range.text.length; 
    } else if(typeof elm.selectionStart == 'number') { // Firefox 
        return elm.selectionStart; 
    } 
} 
 
function setLocation(elm, n) { 
    if(n > elm.value.length) 
        n = elm.value.length; 
    if(elm.createTextRange) {   // IE 
        var textRange = elm.createTextRange(); 
        textRange.moveStart('character', n);             
        textRange.collapse();        
        textRange.select();      
    } else if(elm.setSelectionRange) { // Firefox 
        elm.setSelectionRange(n, n); 
        elm.focus(); 
    } 
} 

其中几个函数的说明：

IE：

　　TextRange.setEndPoint('StartToStart', elm.createTextRange())：将 TextRange 的起始位置调整到 elm.createTextRange() 的起始位置处。第二个参数必须是一个 TextRange，第一个参数必须为以下四个值：StartToStart、StartToEnd、EndToStart、EndToEnd，StartToStart 的意思就是将 TextRange 的起始位置设置为第二个参数的起始位置，同理可知 StartToEnd 的意思就是将 TextRange 的起始位置设置为第二个参数的终止位置，依此类推，EndToStart 和 EndToEnd 也就很好理解了。
　　TextRange.moveStart('character', n)： 将 TextRange 的起始位置后移到 n 个字符处，另外还有一个函数是 moveEnd('character', n)，这是移动 TextRange 的终止位置，若要将终止位置前移，应使用 -n 而不是 n(假定 n 为正数)。

　　TextRange.collapse()：将文本插入点设置到 TextRange 当前起始位置处，若要设置到终止位置处，使用 TextRange.collapse(false)。实际上，设置插入点就是起点和终点设置到同一位置上，这大概也就是 collapse 这个名称的来由吧。所以，该语句也可换成 textRange.moveEnd('character', n - elm.value.length)，只是看起来没那么简明而已。

　　关于 TextRange 对象，查询一下 IE 的 DOM 手册便知。

 

Firefox：

　　Firefox 下就简单得多了，Element.setSelectionRange(start, end)：选取 Element 的文本中从起始位置 start 到终止位置 end 处的文本，同上，要设置插入点，将起始位置和终止位置设为同一个就可以了。