【JS】window.getSelection()获取input中选中的值，兼容ie

先来描述一下问题：想要用户在触发复制事件的时候，获取选中的值，所以在script中加入了如下代码：

(function () {
    function addEventListener(eventName, fn) {
        // 判断当前浏览器是否支持 addEventListener 方法
        if (document.addEventListener) {
            // 浏览器支持此种方式，可以根据方法名找到方法声明，方法声明会转换为true
            document.addEventListener(eventName, fn);  // 第三个参数 默认是false
        } else if (document.attachEvent) {
            document.attachEvent('on' + eventName, fn);
        } else {
            // 相当于 element.onclick = fn;
            document['on' + eventName] = fn;
        }
    }

    addEventListener('copy', function (e) {
        var explorer = navigator.userAgent;
        var content = window.getSelection().toString();
        var E = e || event;
        E.preventDefault();
        if (explorer.indexOf("Chrome") >= 0) {
            E.clipboardData.setData("text", content.trim());
        } else {
            window.clipboardData.setData("text", content.trim());
        }
    });
}());

上面代码中的 content 值就是选中的文本值；

问题1：实操中，发现ie下选中input框中文本进行复制后，content是空的！！！

经过调研发现：

window.getSelection()文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getSelection

其中有句话说的好：

所以也就是说，ie下用window.getSelection()方法获取input下的选中值，根本就是不起作用的。

上面文档提供了解决思路，具体怎么写的呢？中心代码如下：

var activeTextarea = document.activeElement;//可使用Document.activeElement 来返回当前的焦点元素.
//兼容ie中input元素
if (activeTextarea.selectionStart != undefined) {
    content = activeTextarea.value.substring(
        activeTextarea.selectionStart, activeTextarea.selectionEnd
    );
    console.log("----", content);
}

完整代码如下：

(function () {
    function addEventListener(eventName, fn) {
        // 判断当前浏览器是否支持 addEventListener 方法
        if (document.addEventListener) {
            // 浏览器支持此种方式，可以根据方法名找到方法声明，方法声明会转换为true
            document.addEventListener(eventName, fn);  // 第三个参数 默认是false
        } else if (document.attachEvent) {
            document.attachEvent('on' + eventName, fn);
        } else {
            // 相当于 element.onclick = fn;
            document['on' + eventName] = fn;
        }
    }

    addEventListener('copy', function (e) {
        var explorer = navigator.userAgent;
        var content = window.getSelection().toString();
      
        var activeTextarea = document.activeElement;//可使用Document.activeElement 来返回当前的焦点元素.
        //兼容ie中input元素
        if (activeTextarea.selectionStart != undefined) {
            content = activeTextarea.value.substring(
                activeTextarea.selectionStart, activeTextarea.selectionEnd
            );
            // console.log("----", content);
        }

        var E = e || event;
        E.preventDefault();
        if (explorer.indexOf("Chrome") >= 0) {
            E.clipboardData.setData("text", content.trim());
        } else {
            window.clipboardData.setData("text", content.trim());
        }
    });
}());

 

问题2：给input输入框添加了disabled属性后，依旧不能获取选中值，所以可以考虑用 readonly 来替换 disabled，然后再加上不可编辑的样式：

#input[readonly] {
    background-color: #eee;
}

 

 

 

附：如果想要p元素，不可复制，可以给p元素添加如下属性：

.notselect {
    /* 加了这个之后，元素不能被选中 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 

 

启蒙链接：

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement

http://www.jquerycn.cn/a_30303