• 文字复制和选择效果


    文字复制

    • 仅能复制input内的文字
    • 有几种api(兼容问题)

    这里使用典型的一种api,另,为了能复制div内的文字,就需要我们通过动态创建input来实现。

    dom.addEventListener('click',e=>{
        // 创建input
        let input = document.createElement('input');
        document.body.appendChild(input);
        // 塞入内容
        input.setAttribute('value', res.innerText);
        // 选中内容
        input.select();
        // 执行复制
        document.execCommand('copy');
        // 移除掉 input
        document.body.removeChild(input);
    })
    

    文字选择

    • document.body.createTextRange
    • window.getSelection
    // 选择某dom内的所有文本
    function selectText(el) {
        if (document.body.createTextRange) {
            var range = document.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        } else if (window.getSelection) {
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(el);
            selection.removeAllRanges();
            selection.addRange(range);
        } 
    }
    

    简单结合

    dom.addEventListener('click',e=>{
        // 创建input
        let input = document.createElement('input');
        document.body.appendChild(input);
        // 塞入内容
        input.setAttribute('value', res.innerText);
        // 选中内容
        input.select();
        // 执行复制
        document.execCommand('copy');
        // 界面上选择文本  需放在 iput.select()之后,否则会被取消效果
        this.selectText(e.target)  
        // 移除掉 input
        document.body.removeChild(input);
    })
    
  • 相关阅读:
    老人与小孩
    搭讪
    VIM 如何使用系统的剪切板
    Linux 下如何安装 .rpm 文件
    Linux 下如何安装 .bin 文件
    Tomorrow Is A New Day
    Hive 学习(五) Hive之HSQL基础
    Hive 学习(二) hive安装
    Hive 学习(四) Hive的数据类型
    Hive 学习(三) Hive的DDL操作
  • 原文地址:https://www.cnblogs.com/grey-zhou/p/10042883.html
一二三 - 开发者的网上家园