自定义右键菜单功能实现 和 遇到的问题汇总
文本共实现 常用的【复制 粘贴 剪切 全选】功能
【复制 粘贴 剪切】
/**
* 搜索的右键的复制
*/
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定义好顺序，在全部隐藏，那个通过了哪个显示 解决顺序问题 而不是用一个空的标签做容器 哪个通过了添加那个操作，对顺序来说绝对是噩梦…… -
本文只提供思路，具体代码还请各位自己实现，
-
有人说 呵呵 怎么可能会有这么变态的要求？
-
当然有 我做的就是 我会乱说？ 所以 别傻了😂……
