IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    双击全选代码文本

    dujun发表于 2024-09-26 13:14:00
    love 0

    我代码高亮是几年前参考Prism改写的,留有一个遗憾是缺失复制代码文本的功能,因为我一直没有找到理想的交互方式。常见的办法是在右上角放一个常驻或悬停可见的复制按钮,点击后自动将全文复制到剪贴板。我不认可这个设计,一是按钮造成一小块遮挡,二是移动鼠标去找一个按钮进行复制不是很自然的交互,特别是文本较长需要往上回滚的情况下。

    我平时习惯双击选中一段文本,按照这个方式增加了双击全选代码文本的功能——仅全选而不自动加入剪贴板,防止误触。

    $pre.on('dblclick', () => {
        let range = document.createRange(),
            selection = window.getSelection();
    
        range.selectNodeContents($pre[0]);
        selection.removeAllRanges(); //清除之前的选区
        selection.addRange(range); //添加新的选区
    });



沪ICP备19023445号-2号
友情链接