JavaScript事件类型：UI事件之Select事件

Select事件触发方式

１、在HTML中有两种方式表现文本框：一种是使用input元素的单行文本框，另一种是使用textarea的多行文本框。在选择了上述两种文本框中的文本时，就会触发select事件。但是，到底什么时候触发select事件，还会因浏览器而异：在IE9+、Firefox、Safari、Chrome和Opera，只有用户释放鼠标的时候才会触发select事件，而在IE8及更早的版本中不必释放鼠标也会触发select事件。

例子：

<form>
    <input type='text' name='textbox' value='hello'>
</form>

var textbox=document.forms[0].elements['textbox']
textbox.addEventListener('select',function(e){
    alert(e.type)
})
//输出：select

２、调用select()方法时也会触发select事件。

例子：

<form>
    <input type='text' name='textbox' value='hello'>
</form>

var textbox=document.forms[0].elements['textbox']
textbox.select()
textbox.addEventListener('select',function(){
    alert(event.type)
})
//输出：select

取得选择的文本

添加两个属性：selectionStart和selectionEnd。这两个属性分别表示文本选区的开头和结尾的偏移量。
IE9+、Firefox、Safari、Chrome和Opera都支持这两个属性。

例子：

<form>
    <input type='text' name='textbox' value='hello'>
</form>

var textbox=document.forms[0].elements['textbox']
textbox.addEventListener('select',function(){
    var start=textbox.selectionStart;
    var end=textbox.selectionEnd;
    alert(textbox.value.substring(start,end));
})
//输出：选择的部分文本或全部文本

IE8及更早的版本中有一个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息。综合上面的例子，编写一个跨浏览器的函数。

代码如下：

<form>
    <input type='text' name='textbox' value='hello'>
</form>

function getSelectText(textbox){
    if(typeof textbox.selectionStart=='number'){
        var start=textbox.selectionStart;
        var end=textbox.selectionEnd;
        return textbox.value.substring(start,end);
    }else if(document.selection){
        return document.selection.createRange().text;
    }
}

//调用函数getSelectText
var textbox=document.forms[0].elements['textbox']
textbox.onselect=function(){
    alert(getSelectText(textbox))
}
//输出：选择的部分文本或全部文本

选择文本框中的部分文本

select()方法用于选择文本框中的所有文本，setSelectionRange()方法为选择文本框中的部分文本提供了解决方案。这个方法接收两个参数：第一个字符的索引和最后一个字符之后的索引。
IE9+、Firefox、Safari、Chrome和Opera支持这个属性。

例子：

<form>
    <input type='text' name='textbox' value='hello'>
</form>

var textbox=document.forms[0].elements['textbox']
textbox.setSelectionRange(0,3)
textbox.focus()
//文本框中的效果：hel被选中

IE8及更早的版本中首先需要使用createTextRange()方法创建一个范围，使用collapse()将范围折叠到文本框的开始位置，再使用moveStart()和moveEnd()这两个方法将范围移动到位，最后一步就是使用select()方法选择文本。
为了实现跨浏览器编程，可以将上述两种方案组合起来。

代码如下：

<form>
    <input type='text' name='textbox' value='hello'>
</form>

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);
        range.select();
    }
    textbox.focus()
}

//调用函数selectText 
var textbox=document.forms[0].elements['textbox']
selectText(textbox,0,3)
//文本框中的效果：hel被选中

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。