javascript基础学习系列三百零四：选择文本

两种文本框都支持一个名为 select()的方法，此方法用于全部选中文本框中的文本。大多数浏览 器会在调用 select()方法后自动将焦点设置到文本框(Opera 例外)。这个方法不接收参数，可以在任 何时候调用。下面来看一个例子:

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

在文本框获得焦点时选中所有文本是非常常见的，特别是在文本框有默认值的情况下。这样做的出 发点是让用户能够一次性删除所有默认内容。可以通过以下代码来实现:

   textbox.addEventListener("focus", (event) => {
      event.target.select();
});

把以上代码应用到文本框之后，只要文本框一获得焦点就会自动选中其中的所有文本。这样可以极 大提升表单易用性。

select 事件

与select()方法相对，还有一个select事件。当选中文本框中的文本时，会触发select事件。 这个事件确切的触发时机因浏览器而异。在 IE9+、Opera、Firefox、Chrome 和 Safari 中，select 事件 会在用户选择完文本后立即触发;在 IE8 及更早版本中，则会在第一个字符被选中时触发。另外，调用 select()方法也会触发 select 事件。下面来看一个例子:

   let textbox = document.forms[0].elements["textbox1"];
    textbox.addEventListener("select", (event) => {
  console.log(`Text selected: ${textbox.value}`);
});

取得选中文本

虽然 select 事件能够表明有文本被选中，但不能提供选中了哪些文本的信息。HTML5 对此进行了扩 16 展，以方便更好地获取选中的文本。扩展为文本框添加了两个属性: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){
 return document.selection.createRange().text; 22
if (typeof textbox.selectionStart == "number"){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
} else if (document.selection){
}
}

这个修改后的函数兼容在 IE 老版本中取得选中文本。注意 document.selection 是根本不需要
textbox 参数的。

部分选中文本

textbox.value = "Hello world!" 25 // 选择所有文本

HTML5 也为在文本框中选择部分文本提供了额外支持。现在，除了 select()方法之外，Firefox 最早实现的 setSelectionRange()方法也可以在所有文本框中使用。这个方法接收两个参数:要选择 的第一个字符的索引和停止选择的字符的索引(与字符串的 substring()方法一样)。下面是几个例子:

textbox.setSelectionRange(0, textbox.value.length); // "Hello world!" // 选择前3个字符
textbox.setSelectionRange(0, 3);
// 选择第 4~6 个字符 textbox.setSelectionRange(4, 7);
// "Hel"
 // "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); 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"
// "Hello world!"

与其他浏览器一样，如果想要看到选中的效果，则必须让文本框获得焦点。
部分选中文本对自动完成建议项等高级文本输入框是很有用的。