表单文本选择

两种输入框input和textarea，它们都支持select()方法，可以选中文本框的所有文本。

var message = document.forms[0].elements['message'];
message.select();

同时，与select()方法对应的，是一个select事件。当选择了文本框中的文本时，会触发该事件。不过触发的事件，随着浏览器各异。在IE9+、Firefox、Chrome等浏览器中，只有用户选择了文本，而且要释放鼠标时，才会触发select事件，而IE8及以下浏览器中，只要用户选择了文本，不需要释放鼠标就会触发select事件。

通过select事件，可以获取文本中选择的文本内容。这要借助于selectionStart和selectionEnd这两个属性。这两个属性中保存着选择文本相对于整个文本字符串偏移的位置。

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

但是，在IE8及其以下的浏览器中，不支持selectionStart和selectionEnd这两个属性。其有一个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息。正因为如此，所以就不能确定用户选择的是哪一个文本框中的文本信息。可以和select事件搭配使用，在用户选择文本的时候，将会触发select事件，然后再获取文本信息即可获得用户选择的文本信息。

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

如果，需要初始选中部分文本该怎么做呢？

html5中引入了一个方法来解决这个问题，所有的文本框都有一个setSelectionRange()方法。该方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引（类似于substring方法的两个参数）。

var textNode = 'Hello world';
textNode.setSelectionRange(1, 3); //el

然而在IE8以及以下的版本中，依旧不支持这个方法。可以使用IE8中在所有文本框上提供的createTextRange()方法创建一个范围，并将其放在恰当的位置上，然后再使用moveStart()和moveEnd()这两个范围方法将范围移动到位。不过，在调用这两个方法之前，还必须使用collapse()将范围折叠到文本框的开始位置。

var textNode = 'Hello world';
var range = textNode.createTextRange();
range.collapse(true);
range.moveStart('character', 1);
range.moveEnd('character', 2);
range.select(); //el

将上述的两种方案组合起来，可以实现一个兼容所有浏览器的方法。

/**
 * 选择文本
 * @param textbox
 * @param startIndex 起始位置
 * @param endIndex 结束位置
 */
function selectText(textbox, startIndex, endIndex) {
    if (textbox.setSelectionRange) {
        textbox.setSelectionRange(startIndex, endIndex);
    } else if (textbox.createTextRange) {
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart('character', startIndex);
        range.moveEnd('character', endIndex - startIndex);
        range.select();
    }
    textbox.focus();
}

本文参考自:<<JavaScript高级程序设计>>