天天看点

js实现编辑粘贴及input输入框禁止粘贴

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑粘贴逻辑处理</title>
</head>

<body>
    <div class="box">11</div>
    <p class="content" contenteditable>22</p>
    <input type="text" class="enter">
    <input type="text" class="enter" value='22'>
    <input type="text" class="forbitInput" value='禁止粘贴'>


    <script>
        window.onload = function () {
            var _body = document.getElementsByTagName('body')[0];
            _body.addEventListener('paste', function (e) {
                e.preventDefault();
                var clp_text;
                var clp = (e.originalEvent || e).clipboardData;
                if (clp === undefined || clp === null) {
                    clp_text = window.clipboardData.getData('Text') || '';
                    if (clp_text !== '') {
                        if (windon.getSelection) {
                            var newNode = document.createElement('span');
                            newNode.innerHTML = clp_text;
                            window.getSelection().getRangeAt(0).insertNode(newNode);
                        } else {
                            document.selection.createRange().pasteHTML(clp_text);
                        }
                    }
                } else {
                    clp_text = clp.getData('text/plain') || '';
                    if (clp_text !== '') {
                        document.execCommand('inserttext', false, clp_text);
                    }
                }
            })

            var forbitInput = document.getElementsByClassName('forbitInput')[0];
            forbitInput.onpaste = function (e) {
                e.stopPropagation(); // 取消冒泡
                return false;
            }
        }
    </script>
</body>

</html>