调整字号

用 JavaScript 选择文本框文本

要选中文本框内的文本,最常用的方法是 select()<input><textarea> 元素都支持,此时文本框会获得焦点,并且文本全部被选中。如果要选择部分的文本,则可以用下面的办法。

现代浏览器

在现代浏览器中 <input><textarea> 支持一个 setSelectionRange 方法和两个属性:selectionStartselectionEnd,都可以用来选中文本。setSelectionRange 接受两个值:选区起点和选区终点的后一个位置,用法类似字符串的 slice

selectionStartselectionEnd 属性始终保存了选区的起点和终点索引,它们既可读也可写,分别设置这两个值以后,效果跟调用了 setSelectionRange 是一样的。

如果设置的起点和终点值相同,则会把光标移动到相应位置。

支持此方法的浏览器有 IE9+、Chrome、Firefox、Opera、Safari。

IE6-8

IE6-8 不支持上面的方法和属性,需要用 createTextRange 方法创建一个范围,代码如下:

var field = document.getElementsByTagName('input')[0];  // input 元素
var range = field.createTextRange();  // 创建范围
range.collapse(true);  // 折叠范围
range.moveStart("character", start);  // 移动起点
range.moveEnd("character", end);  // 移动终点
range.select();  // 选择文本

关键步骤

要看到选中的文本,最后还有关键的一步是调用 focus 方法让文本框获得焦点。兼容各浏览器的写法如下:

function selectText(field, start, end) {
    if (field.createTextRange) {
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart("character", start);
        selRange.moveEnd("character", end);
        selRange.select();
    } else if (field.setSelectionRange) {
        field.setSelectionRange(start, end);
    }
    field.focus();
};

示例

这个方法适合用来做自动完成功能,在下面的框里试试,可以自动补全 google.com、baidu.com 和 sogou.com 三个网址。

还没有评论,沙发空缺中……
flight