美文网首页
一个高亮选择后自动复制然后鼠标中键无格式粘贴的代码

一个高亮选择后自动复制然后鼠标中键无格式粘贴的代码

作者: 秋轩夜语 | 来源:发表于2023-04-01 11:11 被阅读0次

    一个高亮选择后自动复制然后鼠标中键无格式粘贴的代码

    以下是一个基于JavaScript的代码示例,实现了在选择文本后自动复制,并通过鼠标中键无格式粘贴的功能来去除格式:

    document.addEventListener('mouseup', function(e) {

      var selectedText = window.getSelection().toString();

      if (selectedText !== '') {

        // 创建一个临时的 textarea 元素

        var tempTextarea = document.createElement('textarea');

        tempTextarea.value = selectedText;

        document.body.appendChild(tempTextarea);

        // 选中文本并复制

        tempTextarea.select();

        document.execCommand('copy');

        // 从 body 中移除临时元素

        document.body.removeChild(tempTextarea);

      }

    });

    document.addEventListener('mousedown', function(e) {

      // 如果按下的是中键

      if (e.button === 1) {

        // 获取剪贴板中的纯文本内容

        var clipboardData = e.clipboardData || window.clipboardData;

        var pastedText = clipboardData.getData('text/plain');

        // 在当前光标位置插入纯文本

        var selection = window.getSelection();

        var range = selection.getRangeAt(0);

        var textNode = document.createTextNode(pastedText);

        range.deleteContents();

        range.insertNode(textNode);

        // 设置新的光标位置

        range.setStartAfter(textNode);

        range.setEndAfter(textNode);

        selection.removeAllRanges();

        selection.addRange(range);

        // 阻止默认粘贴行为

        e.preventDefault();

      }

    });

    在这个代码中,我们通过添加两个事件监听器来实现功能:

    mouseup 事件监听器:当用户在页面中选择文本并松开鼠标时,我们将选中的文本复制到剪贴板中。

    mousedown 事件监听器:当用户在页面中按下鼠标时,如果按下的是中键,则我们从剪贴板中获取纯文本内容,并在当前光标位置插入该文本。

    需要注意的是,由于浏览器的安全策略,我们无法直接访问剪贴板中的内容,而只能通过用户的操作来触发剪贴板事件并获取内容。因此,在上面的代码中,我们使用了 e.clipboardData.getData

    ('text/plain') 来获取剪贴板中的纯文本内容。同时,我们也需要在代码中阻止默认的粘贴行为,以避免将带有格式的内容粘贴到页面中。

    相关文章

      网友评论

          本文标题:一个高亮选择后自动复制然后鼠标中键无格式粘贴的代码

          本文链接:https://www.haomeiwen.com/subject/ayvkddtx.html