document.selection

Posted 2020-10-01

一、document.selection 介绍

　　document.selection 表示当前网页中的选中内容。代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。 　

　　selection对象非w3c标准，部分浏览器支持。典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。

　　　　① IE：document.selection

　　　　② FireFox：window.getSelection()

　　　　③ document.selection只有IE支持，window.getSelection()也只有 FireFox 和 Safari 支持，都不是标准语法。

　　 用户和脚本都可以创建选中区。

　　　　用户创建选中区的办法是拖曳文档的一部分。

　　　　脚本创建选中区的办法是在文本区域或类似对象上调用 select 方法。要获取当前选中区，请对 document 对象应用 selection 关键字。要对选中区执行操作，请先用 createRange 方法，从选中区创建一个文本区域对象。 

　　方法有：

• clear　清除选中的内容
• empty　取消选中
• createRange　返回 TextRange 或 ControlRange 对象
• createRangeCollection 不支持

　　属性有：

• type　选中内容的类型
• typeDetail 不支持

二、document.selection.createRange()

　　document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回ControlRange 对象。

　　配合 execCommand，在 html 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

三、示例

　　限定 input 的字数：

jQuery.fn.maxLength = function(max){
    this.each(function(){
        var type = this.tagName.toLowerCase();
        var inputType = this.type? this.type.toLowerCase() : null;
        if(type == "input" && inputType == "text" || inputType == "password"){
            //应用标准的maxLength
            this.maxLength = max;
        }else if(type == "textarea"){
            this.onkeypress = function(e){
                var ob = e || event;
                var keyCode = ob.keyCode;
                var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
                return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
            };
            this.onkeyup = function(){
                if(this.value.length > max){
                    this.value = this.value.substring(0,max);
                }
            };
        }
    });
};