html js 执行粘贴无效和 判断选中的内容(纯文本和html)是否为空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            border: 1px solid;
        }
        img{
            width: 100px;
            height: 100px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<a href="mailto:name@email.com">Email</a>
<div class="a"></div>
<input type="text" value="123123">
<button>dianwo</button>
<div id="testDiv" contenteditable="true"><b>123123</b>456 <img src="a.jpg" alt=""></div>
</body>
<script>

    /**
     * 问题1
     * 粘贴无效
     */
    document.querySelector('button').onclick = function () {
        document.querySelector('input').focus()
        document.execCommand("Paste","false",null);
        console.log('执行粘贴')
    }


    /**
     * 
     * 判断选中的内容(纯文本和html)是否为空,
     */
    var testDiv = document.getElementById("testDiv");

    testDiv.onmouseup = function(){

        var selectionObj = null, rangeObj = null, selectedText = "", selectedHtml = "";

        if(window.getSelection){

            selectionObj = window.getSelection();

            selectedText = selectionObj.toString();

            rangeObj = selectionObj.getRangeAt(0);

            var docFragment = rangeObj.cloneContents();

            var tempDiv = document.createElement("div");

            tempDiv.appendChild(docFragment);

            selectedHtml = tempDiv.innerHTML;

        }else if(document.selection){

            selectionObj = document.selection;

            rangeObj = selectionObj.createRange();

            selectedText = rangeObj.text;

            selectedHtml = rangeObj.htmlText;

        }

        alert(selectedText);

        alert(selectedHtml);

    };
</script>
</html>

  参考内容:http://www.cnblogs.com/ArthurPatten/p/3317263.html

posted @ 2017-06-06 18:18  _白马非马  阅读(1347)  评论(0编辑  收藏  举报