虽然select 事件能够表明有文本被选中,但不能提供选中了哪些文本的信息。HTML5对此进行了扩
展,以方便更好地获取选中的文本。扩展为文本框添加了两个属性:selectionStart 和selectionEnd。
这两个属性包含基于0 的数值,分别表示文本选区的起点和终点(文本选区起点的偏移量和文本选区终
点的偏移量)。因此,要取得文本框中选中的文本,可以使用以下代码:
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}
因为substring()方法是基于字符串偏移量的,所以直接传入selectionStart 和selectionEnd
就可以取得选中的文本。
这个扩展在IE9+、Firefox、Safari、Chrome 和Opera 中都可以使用。IE8 及更早版本不支持这两个
属性,因此需要使用其他方式。
老版本IE 中有一个包含整个文档中文本选择信息的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;
}
}
这个修改后的函数兼容在IE 老版本中取得选中文本。注意document.selection 是根本不需要
textbox 参数的。
部分选中文本
HTML5 也为在文本框中选择部分文本提供了额外支持。现在,除了select()方法之外,Firefox
最早实现的setSelectionRange()方法也可以在所有文本框中使用。这个方法接收两个参数:要选择
的第一个字符的索引和停止选择的字符的索引(与字符串的substring()方法一样)。下面是几个例子:
textbox.value = “Hello world!”
// 选择所有文本
textbox.setSelectionRange(0, textbox.value.length); // “Hello world!”
// 选择前3 个字符
textbox.setSelectionRange(0, 3); // “Hel”
// 选择第4~6 个字符
textbox.setSelectionRange(4, 7); // “o w”
如果想看到选择,则必须在调用setSelectionRange()之前或之后给文本框设置焦点。这个方法
在IE9、Firefox、Safari、Chrome 和Opera 中都可以使用。
IE8 及更早版本支持通过范围部分选中文本。这也就是说,要选择文本框中的部分文本,必须先使
用IE 在文本框上提供的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();
// 选择前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”, 6);
range.select(); // “o w”
与其他浏览器一样,如果想要看到选中的效果,则必须让文本框获得焦点。
部分选中文本对自动完成建议项等高级文本输入框是很有用的。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐