首页 > 其他 > 详细

将鼠标焦点定位到文本框最后

时间:2014-03-04 13:02:41      阅读:530      评论:0      收藏:0      [点我收藏+]

  在Firefox, Chrome浏览器中,如果我们想要选取一段文本框中的内容,我们可以使用setSelectionRange(startIndex, endIndex)方法。

  但在IE8其更早版本中,这个方法是不支持的,一般我们使用范围选择部分文本。要选择文本框中的部分文本,必须首先使用IE 在所有文本框上提供的createTextRange()方法创建一个范围,并将其放在恰当的位置上。然后,再使用moveStart()和moveEnd()这两个范围方法将范围移动到位。不过,在调用这两个方法以前,还必须使用collapse()将范围折叠到文本框的开始位置。此时,moveStart()将范围的起点和终点移动到了相同的位置,只要再给moveEnd()传入要选择的字符总数即可。最后一步,就是使用范围的select()方法选择文本。

例如有这么一个文本框:

<textarea id="text">sssssssssssse  aaaa</textarea>

其样式如下:

bubuko.com,布布扣
textarea {
    width: 200px;
    height: 200px;
}
textarea:focus {
    border: 2px red solid;
}
bubuko.com,布布扣

如果想选择文本框中的第3个到第10个字符之前的文本,可以采用如下方法:

bubuko.com,布布扣
function selectText(selector, startIndex, endIndex) {
    var value = selector.value;
    if(selector.setSelectionRange) {
        selector.setSelectionRange(startIndex - 1, endIndex); //Chrome, Firefox
    } else {
        //IE8
        var range = selector.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex - 1);
        range.moveEnd("character", endIndex - startIndex + 1);
        range.select();
    }
}
var obj = document.getElementById(‘text‘);
selectText(obj, 3, 10);
bubuko.com,布布扣

如果想把鼠标焦点移到最后,可以采用方法如下:

bubuko.com,布布扣
function moveToEnd(selector) {
    var value = selector.value;
    if(selector.setSelectionRange) {
        selector.setSelectionRange(value.length, value.length); //Chrome, Firefox
    } else {
        //IE8
        var range = selector.createTextRange();
        range.collapse(true);
        range.moveStart("character", value.length);
        range.moveEnd("character", 0);
        range.select();
    }
}
var obj = document.getElementById(‘text‘);
moveToEnd(obj);
selectText(obj, 3, 10);
bubuko.com,布布扣

将鼠标焦点定位到文本框最后,布布扣,bubuko.com

将鼠标焦点定位到文本框最后

原文:http://www.cnblogs.com/hanbai/p/3579209.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!