文本框脚本 - select 事件

HTML中，用两种方式来表示文本框： input 单行文本、textarea 多行文本

那么在文本中存在哪些事件尼？

　　1    select　　都支持 但是其触发的时机不一样

IE9+ 、Safair 、Opera、Chorme、Firefox	当用户选择文件时，鼠标松开时触发
IE8以及其下	当用户选择文本时，就会触发

　　

  window.onload = function() {
         if (document.addEventListener) {
             document.forms[0].elements[0].addEventListener("select", function () {
                 console.log("select" + this.value);
             }, false)
         } else {
             document.forms[0].elements[0].attachEvent("onselect", function (event) {
                 console.log("ie select" + event.srcElement.value);
             });
         }
     }

　　2 取得选择的文本

　　　　H5  添加的两个属性，

　　　　　　selectionStart、selectionEnd 

　　　　IE9+ 、Safair 、Opera、Chorme、Firefox 支持这两个属性

　　　　IE8不支持这两个属性，但是提供 document.selection 对象， 其中保存着用户在整个文档范围内选择的文本信息；也就是说，无法确定用户选择的是页面中那个部位的文本。不过，在于select事件一起使用时候，可以假设是用虎选择了文本框中的文本，因此触发该事件。要取得选择的文本，首先必须创建一个范围，然后再将文本从其中取出来，如下。

　　　　

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

　　3 选择部分内容

　　　　setSelectionRange(start,end)  接收两个参数，并且不包括 end指定的内容

　　IE9+ 、Safair 、Opera、Chorme、Firefox

　　　　

    document.forms[0].elements[0].setSelectionRange(0,3); //

  document.forms[0].elements[0].setSelectionRange(0,2);//
    document.forms[0].elements[0].setSelectionRange(0,1);//

　　IE8以及其低版本中不支持 setSelctionRange方法，但是要想选择部分内容步骤如下：

　　　　1　　 createTextRange 创建一个范围，并将其放在恰当的位置

　　　　2 　　再通过 moveStart() 和 moveEnd()这两个范围方法将范围移动到位。

　　　　3 　　调用moveStart、moveEnd之前必须使用 collapse()将范围折叠到文本框的开始位置。（此时在moveStart()将范围的起始点和终点移到了相同的位置 ）

　　　　4　　接着再给moveEnd()传入要选择的字符总数即可。 最后一步就是使用范围的select()选择文本

movStart()  

@param {string} unit  character、 word 、 sentence、textedit 

@param {Number} [count]

@return {void}

moveEnd() 

    var textbox = document.forms[0].elements[0]; //who are you miss w
　　 var range = textbox.createTextRange();
    range.collapse(true);
    range.moveStart("word",0); // character 字符  || word 单词   ||  sentence 段落
    range.moveEnd("word",3);　　// who are you
    range.select();

　　当为 textedit 插入点(选择开始位置从结尾开始)移动到整个文本范围的结束处

var textbox = document.forms[0].elements[0]; //who are you miss w

var range = textbox.createTextRange();
range.collapse(true); 
range.moveStart("textedit"); // character 字符 || word 单词 || sentence 段落 
range.moveStart("character",-10); // miss wang 
range.select();

　　综合上面的方式可以给出跨浏览器的方式：

　　 function selectText(textbox,start,end){
        if(textbox.setSelectionRange){
            textbox.setSelectionRange(start,end)
        }else{
            var range = textbox.createTextRange();
            range.collapse(true);
            range.moveStart("character",start); // character 字符  || word 单词 || sentence 段落
            range.moveStart("character",end-start)
            range.select();
        }
    }

@param {Node}　　

@param {Number} 

@param {Number} [count]

@return {void}

　　下面通过一个实例来验证一下：

　　不管哪种情况下，必须是获得焦点之后执行

    function selectText(textbox,start,end){
        if(textbox.setSelectionRange){
            textbox.setSelectionRange(start,end)
        }else{
            var range = textbox.createTextRange();
            range.collapse(true);
            range.moveStart("character",start); // character 字符  || word 单词 || sentence 段落
            range.moveStart("character",end - start)
            range.select();
        }
    }

    selectText(textbox,0,10); //who are yo