自定义右键菜单功能实现 和 遇到的问题汇总

文本共实现 常用的【复制 粘贴 剪切 全选】功能

【复制 粘贴 剪切】

/**
 * 搜索的右键的复制
 */
function searchCopy() {
    document.execCommand('Copy', 'false', null);
    console.log('复制');
}

/**
 * 搜索的右键的剪切
 */
function searchCut() {
    document.execCommand('Cut');
    console.log('执行剪切');
}
/**
 * 搜索的右键的粘贴
 */
function searchPaste() {
    console.log('执行粘贴');
    mainObject.getClipboardInfo(function(data) {
        pasteToInput(data);
    });
    **这里补充说明一下  粘贴用纯dom技术是无法实现的，因为处于安全考虑 chrome已经禁用了程序直接访问剪切板的内容，你想一下，如果用户剪切板有银行密码，而你调用一个方法就可以取得，那你不是美滋滋了？所以开发混合应用时候只能依靠c端        
       提供能力支持**
}

【全选 】分两种情况，

• 普通标签的全选，如 div .span 等 全选用下面的方法，elemnt为需要选中的标签

    function _documentSelectElement(element) {
    var sel = window.getSelection();
    var range = document.createRange();
    range.selectNode(element);
    sel.removeAllRanges();
    sel.addRange(range);
}

• 输入框全选，如 input 包含contenteditable属性的其他标签等,全选用下面的方法，elemnt为需要选中的标签

function documentSelectElement(element) {
    element.focus();
    element.select();
}

【其他常用方法】

• 判断是否选中内容 text

    window.getSelection().toString()

• 判断是否选中内容 html

    function mycopy() {
        let selectionObj = window.getSelection();
        let rangeObj = selectionObj.getRangeAt(0);
        let docFragment = rangeObj.cloneContents();
        let tempDiv = document.createElement('div');
        tempDiv.appendChild(docFragment);
        let s = tempDiv.innerHTML;
        return s;
    }

【遇到的问题】

• 用 mousedown 而不是 click 触发各种操作 （话说这个问题 老夫遇到过两次，第一次弄了好久好不容易解决了 结果第二次出现了又不知道咋弄了，又折腾了半天，真是郁闷，所以这个一定要谨记啊 都是血的教训
  ）

    如果你用click 就会出现奇怪的现象，比如 你选中了内容 呼出右键菜单 执行复制，结果选中的内容取消选中了，让你没有一点脾气！，
  

【其他的补充】

• 对于文字的复制，理想的方式是 右键的时候先选中文本【用上文的选中文本的方法】，执行完复制后再 取消文字的选中状态，

function _removeSelectElement() {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }

• 还一个需要注意的地方就是 右键菜单出现的位置，此处需要注意当菜单在靠近屏幕边缘时候 需要调整他的方向即可

 $('.inputrightmenu').removeClass('hideList').html(temp).css({
            left: e.pageX + 'px',
            top: e.pageY - 94 + 'px'
        });
        let ofl = document.querySelector('.inputrightmenu').offsetLeft;
        if (ofl >= document.body.clientWidth - 100) {
            $('.inputrightmenu').css({
                left: e.pageX - 100 + 'px',
                top: e.pageY - 94 + 'px'
            });
        }

• 如果

  右键菜单较多，
  且针对不同的目标点击要求右键弹出不同的菜单，
  判断菜单可用操作的方法有的是同步可返回结果，有的是异步才可以返回结果
  菜单的操作还有多种状态，如可用，不可用，十分钟后可用，等等。
  并且对菜单的操作的顺序有要求

  1 可以考虑 用 策略模式 解决 多状态、多操作 问题
  2 async 解决异步问题
  3 先用html定义好顺序，在全部隐藏，那个通过了哪个显示 解决顺序问题 而不是用一个空的标签做容器 哪个通过了添加那个操作，对顺序来说绝对是噩梦……

• 本文只提供思路，具体代码还请各位自己实现，

• 有人说 呵呵 怎么可能会有这么变态的要求？

• 当然有 我做的就是 我会乱说？ 所以 别傻了😂……