html实现实时复制输入内容

让html实时复制标签内容

方法

 ie实现html实时的复制输入内容是很简单的,使用window.clipboardData.setData("Text",clipBoardContent)方法,将要复制的内容替换clipBoardContent即可,然而chrome浏览器为了安全起见是禁止使用window.clipboardData.setData("Text",clipBoardContent) 方法的。
 chrome浏览器支持使用document.execCommand("Copy")方法,然此方法使用前需要将要复制的内容选中,

 var e = document.getElementById("a"); 
    e.select(); // 选择对象 
    document.execCommand("Copy"); // 执行浏览器复制命令

当使用e.select()时复制的内容会被选中,这时再输入会将之前输入的内容替换,实时进行复制时,当使用键盘按键的方法,既一个字母打出既被选中,然后在输入就会清空替换,很难实现实时复制。
 这里借鉴了

来实现实时复制

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游戏繁体输入 By:Cc</title>
</head>
<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>

<body>
<div>
    <label onmousedown="whichButton(event)">
        <textarea id="a" style="width: 250px;height: 50px;resize:none;outline: none;"></textarea>
        <span>提示:鼠标右键清除</span>
    </label>
</div>

</body>
<script type="text/javascript">
    $(document.body).bind({
        copy: function (e) {
            var clipboardData = e.originalEvent.clipboardData;
            let b = document.getElementById("a");
            clipboardData.setData('Text', b.value);
            // console.log(b.value);
            return false;
        }
    });

    $('#a').on('keyup', function (e) {
        document.execCommand('copy');
    });


    function whichButton(event) {
        var btnNum = event.button;
        if (btnNum == 2) {
            $('#a').val('');
        }
    }

</script>
</html>



版权声明:本文为原创文章,版权归 CC 所有。

本文链接:https://wzmoe.com/index.php/archives/18/

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
Last modification:November 11th, 2019 at 07:12 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment