文本框脚本 - 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

巴特西

文本框脚本 - select 事件

最新文章

热门文章