JavaScript选择文本的方法分享

在html页面中，<input>和<textarea>两种文本框都支持select()方法，此方法用于选择文本框中的所有文本。
在调用select()方法时，大多数浏览器都会将焦点设置到文本框。
这个方法不接受参数，可以在任何时候调用。

例子：

var textbox = document.forms[0].elements["textbox1"];
textbox.select();

在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值时。
如此便可以让用户比比一个一个的删除文本。

例子：

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getEvent: function (event) {
        return event ? event : window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    }
};
var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox, "focus", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.select();
})

将以上代码应用到文本框之后，只要将文本框获得焦点，就会选择其中所有的文本。
这种技术能够较大幅度地提升表单的易用性。

1，JavaScript选择(select)事件
与select()方法对应的，是一个select()事件。在选择了文本框中的文本时，就会触发select()事件。
在IE9、Opera、Firefox、Chrome和Safari中，只要有用户选择了文本（而且要释放鼠标），才会触发select事件。
而在IE中，只要用户选择了一个字母（不必释放鼠标），就会触发select()事件。
在IE8及更早的版本中，只要用户选择了一个字母（不必释放鼠标），就会触发select事件。
另外，在调用select()方法时也会触发select事件。另外在调用select()方法时也会触发select事件。

例子：

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    }
};
var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox, "select", function (event) {
    var target = document.forms[0].elements["textbox1"];
    alert("Text selected");
});

这里，通过事件处理程序中重新获取对文本框的引用，可以避免在跨浏览器时出现问题。

2，JavaScript取得选择的文本
虽然通过select事件我们可以知道用户什么时候选择了文本，但仍然不知道用户选择了什么文本。
HTML5通过一些扩展方案解决了这个问题，以便更顺利地取得选择的文本。
该规范采取的方法是添加两个属性：selectionStart和selectEnd。
这两个属性中保存的是基于0的数值，表示所选的文本的范围（即文本选取开头和结尾的偏移量）。
因此，要取得用户在文本框中选择的文本，可以这样：

function getSelectedText(textbox) {
    return textbox.value.substring(text.selectionStart, text.selecttionEnd);
}

因为subString()方法基于字符串的偏移量执行操作，所以将selectionStart和selectionEnd直接传给它就可以取得选中的文本。
IE9、Firefox、Safari、Chrome和Opera都支持这两个属性。IE8及之前的版本不支持这两个属性，而是提供了另一种方案。
IE8及之前的版本有一个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息；
即，无法确定用户选择的是页面中那个部位的文本。

不过，在与select事件一起使用时，可以假定是用户选择了文本框中的文本。
不过，在与select事件一起使用时，可以假定用户选择了文本框的文本，因而触发了该事件。
要取得选择的文本，首先必须创建一个范围，然后再将文本从其中提取出来。

例子：

function getSelectedText(textbox) {
    if (document.selection) {
        return document.selection.createRange().text;
    } else {
        return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
    }
}

这里修改了前面的函数，包括了在IE中取得选择文本的代码。注意，调用document.selection时，不需要考虑textbox参数。

3，JavaScript选择部分文本
HTML5也为选择文本框中的部分文本提供了解决方案，即最早由Firefox引入的setSelectionRange()方法。现在除select()方法之外，所有文本框都有一个setSelectionRange()方法。这个方法接受两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。
例子：

var textbox = document.forms[0].elements["textbox1"];
textbox.value = "Hello world!";
//选择所有文本
textbox.setSelectionRange(0, textbox.value.length);  //"Hello world!"
//选择前3个字符
textbox.setSelectionRange(0, 3);  //"Hel"
//选择第4到第7个字符
textbox.setSelectionRange(4, 7);  //"o w"

要看到选择的文本，必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框。IE9、Firefox、Safari、Chrom和Opera支持这种方案。
IE8及更早的版本支持使用范围选择部分文本。要选择的文本框中的部分文本，必须首先使用这个方法创建一个范围，并createTextRange()方法创建一个范围，并将其放在恰当的位置上。然后，再使用moveStart()和moveEnd()这两个范围方法将范围带移动到位。
不过，在调用这两个方法以前，还必须使用collapse()范围折叠到文本框的开始位置。
此时，moveStart()将范围的起点和终点移动到了相同的位置，只要给moveEnd()传入要选择的字符总数即可。
最后一步，就是使用范围的select()方法选择文本。

例子：

textbox.value = "Hello world!";
var range = textbox.createTextRange();
//选择所有文本
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", textbox.value.length);  //"Hello world"
range.select();  //"Hello world!"
//选择前3个字符
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", 3);
range.select();  //"Hel"
//选择第4个到第6个字符
range.collapse(true);
range.moveStart("character", 4);
range.moveEnd("character", 3);
range.select();  //"o w"

与在其它浏览器中一样，要想在文本框中看到文本被选择的效果，必须让文本框获得焦点。
为了跨浏览器编程，可以将上述两种方案组合起来。

例子：

function selectText(textbox, startIndex, stopIndex) {
    if (textbox.setSelectionRange) {
        textbox.setSelectionRange(startIndex, stopIndex);
    } else if (textbox.createTextRange) {
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex);
        range.moveEnd("character", stopIndex - startIndex);
        range.select();
    }
    textbox.focus();
}

这个selectText()函数接受3个参数：
要操作的文本框、要选择文本中第一个字符的索引和要选择文本中最后一个字符之后的索引。

首先，函数测试了文本框是否包含seSelectionRange()方法。

如果有，则使用该方法。否则，检测文本框是否支持createTextRange()方法，如果支持，则通过创建范围实现选择。

最后一步，就是为文本框设置焦点，以便用户看到文本框中选择的文本。

可以像下面这样使用selectText()方法：

var textbox = document.forms[0].elements["textbox1"];
textbox.value = "Hello world!";
//选择所有文本
selectText(textbox, 0, textbox.value.length); //"Hello world!"
//选择前3个字符
selectText(textbox, 0, 3);  //"Hel"
//选择第4到第6个字符
selectText(textbox, 4, 7);  //"o w"

选择部分文本的技术在实现高级文本输入框是很有用，例如提供自动完成建议的文本框就可以使用这种技术。

您可能感兴趣的文章：
JavaScript选择文本的方法分享
JavaScript 移动和重排option选项的方法
Illustrator调渐变颜色方法分享
Jquery 学习笔记（二）
百度云资源分享群组怎么使用?
jQuery代码优化 选择符篇
JavaScript 添加option选项的方法
探讨JavaScript的选择框脚本
javascript 获取下拉列表框的文本值
HTML5 实现访问本地文件的方法