选择文本

目录

一、选择文本

二、取得选择文本

---

一、选择文本

select()方法

针对type特性值为text的input和textarea标签，用于选择文本域中的所有文本。该方法不接收参数，且无返回值。

选择文本

select事件

与select()方法对应的，是一个select事件，在选择了文本框中的文本时，会触发select事件。

不过关于触发select事件的时间有分歧。ie8及以下版本的浏览器中，只要用鼠标选择了一个字符，未释放鼠标前，就可以触发select事件，其它浏览器中，要释放鼠标才会触发。

setSelectionRange()

可以选择文本框中的部分文本。这个方法接收两个参数，其一要选择的第一个字符的索引，其二要选择的最后一个字符之后的字符的索引。

firefox浏览器使用该方法，可以选择文本，但不能获取焦点。其他浏览器使用该方法可以自动获取焦点。

注意，ie8及以下版本的浏览器不支持。

选择前3个字符

ie8及以下版本的浏览器支持使用范围选择部分文本。要选择文本框中的部分文本，必须首先使用createTextRange()方法创建一个范围，并将其放在恰当的位置上。然后，再使用moveStart()和moveEnd()这两个范围方法将范围移动到位。

　　不过，在调用这两个方法以前，还必须使用collapse()将范围折叠到文本框的开始位置。此时，moveStart()将范围的起点和终点移动到了相同的位置，只要再给moveEnd()传入要选择的字符总数即可。最后一步，就是使用范围的select()方法选择文本。

选择前3个字符

兼容所有浏览器的写法如下。

选择前3个字符

二、取得选择文本

虽然通过select事件可以知道用户什么时候选择了文本，但仍不知道用户选择了什么文本。html5通过一些扩展方案解决了这个问题，以便更顺利的取得选择的文本。该规范采取的方法是添加两个属性，其一selectionStart属性，其二selectionEnd属性。这两个属性中保存的是基于0的数值，表示所选择文本的范围，即文本选区开头和结尾的偏移量。

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

注意，ie8及以下版本的浏览器不支持。ie8-浏览器有一个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息。也就是说，无法确定用户选择的是页面中哪个部位的文本。不过，在与select事件一起使用的时候，可以假定是用户选择了文本框中的文本，因而触发了该事件。要取得选择的文本，首先必须创建一个范围，然后再将文本从其中提取出来。

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