zoukankan      html  css  js  c++  java
  • 论思维变通的重要性!--input输入框禁止编辑,且 右键弹出窗口复制

    我们知道 web复制 chrome给我们提供了

    document.execCommand("Copy","false",null); 可以把选中的内容放到剪切板里


    所以 面对题目的需求 我们 实现只需要以下步骤

    //1禁止编辑
    $('#actives-select-w').on('keydown', function (e) {
    e.preventDefault();
    })
    上面有问题, 可以给input加上 readonly 属性

    //2 右键全选(注意此处是input的全选)
    function documentSelectElement(element) {
    element.focus();
    element.select();
    }
    //3 执行复制
    document.execCommand("Copy","false",null);

    //4。。。然鹅 并没有什么乱用,
      经过测试发现 复制命令只针对于input类的输入框无效
    //下面请允许插播一下楼主当时的心情
    不可能啊?为啥不行呢?我在其他几个页面都可以啊,为啥唯独这个页面不行,而且就一条命令 也不存在写错啊。
    我也全选中了啊,为啥ctrl c 就行呢。(当然如果禁止了input的 keydown 事件 Ctrl c 也 狗带了)
    最终,楼主只好极不情愿的承认了:好吧 看来这条命令在这里确实无效,

    可是 需求还要实现啊,最终机智的我终于不再牛角尖了,下面是解决办法
    (思路,既然input不能复制,其他标签可以复制,那我就做一个标签隐藏掉,然后把input的val值拿出来放到隐藏节点 然后在执行复制命令不就好了吗)
    // 1 2 同上
    //其余 见如下代码

    let txt = $('#actives-select-w').val();
                $('.for-copy-path').html(txt);
    //全选
                documentSelectElement2($('.for-copy-path')[0])
                document.execCommand("Copy","false",null);
    
    
    
    //普通节点的全选
    function documentSelectElement2(element) {
            var sel = window.getSelection();
            var range = document.createRange();
            range.selectNode(element);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    
    
  • 相关阅读:
    对于excel的操作
    初试 ElasticSearch
    02-基本数据类型
    javascript 三种数组扁平化方式
    javascript数组操作方法
    javascript数组的16种循环(包含ES5、ES6)
    01-typescript-安装及编译
    nvm管理多版本node
    css块级居中的四种方法
    javascript try-catch-finally异常捕获
  • 原文地址:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/7018601.html
Copyright © 2011-2022 走看看