论思维变通的重要性!--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);
    }

posted @ 2017-06-15 16:36  _白马非马  阅读(446)  评论(0编辑  收藏  举报