鼠标右键自定义功能菜单将鼠标选中内容填充至输入框
由于思路比较简单 而且代码中注释很详细，就不多做解释。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #menu { display: none; /*设置为0 隐藏自定义菜单*/ height: 125px; overflow: hidden; /*隐藏溢出的元素*/ box-shadow: 0 1px 1px #888, 1px 0 1px #ccc; position: absolute; /*自定义菜单相对与body元素进行定位*/ } .menu { width: 130px; height: 25px; line-height: 25px; padding: 0 10px; cursor: pointer; font-size: 8px; } .menu:hover { background-color: gainsboro; } </style> </head> <body> <input type="" name="" id="name" value="" placeholder="name" /> <input type="" name="" id="age" value="" placeholder="age" /> <input type="" name="" id="site" value="" placeholder="site" /> <!--需要使用右键自定义菜单区域 在该区域右键触发--> <div id='content'> <p>kelvin</p><br /> <p>23</p><br /> <p>www.baidu.com</p><br /> </div> <!--自定义功能菜单列表--> <div id="menu"> <div class="menu">填充至姓名输入框</div> <div class="menu">填充至年龄输入框</div> <div class="menu">填充至网址输入框</div> </div> </body> <script> window.onload = function() { //1 定义变量存储鼠标选中文本内容 var copyContent = ""; //2 根据id获取指定区域 绑定鼠标事件 document.getElementById("content").onmouseout = function() { //3 获取鼠标选中文本内容 copyContent = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text; console.log(copyContent) } //4 在标签为id的区域 右键弹出菜单 document.getElementById("content").oncontextmenu = function(event) { //4.1 取消默认的浏览器自带右键 很重要！！ event.preventDefault(); //4.2 获取我们自定义的右键菜单 var menu = document.querySelector("#menu"); //4.3 根据事件对象中鼠标点击的位置，进行定位 menu.style.left = event.clientX + 'px'; menu.style.top = event.clientY + 'px'; //4.4 改变自定义菜单的宽，让它显示出来 menu.style.display = "block"; //4.5 让浏览器自带右键菜单不弹出 return false; } //5 获取所有菜单标签 并给每个菜单标签绑定触发时执行的功能 var menus = document.getElementsByClassName("menu"); for (i in menus) { menus[i].onclick = function(event) { var item = event.target; if (item.innerHTML == '填充至姓名输入框') { document.getElementById("name").value = copyContent; } else if (item.innerHTML == '填充至年龄输入框') { document.getElementById("age").value = copyContent.trim() } else { alert("正在开发...") } document.querySelector('#menu').style.display = "none"; } } //6 关闭右键菜单，很简单 document.onclick = function(event) { //6.1 用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能 document.querySelector('#menu').style.display = "none"; } } </script> </html>
直接拷贝创建html文件复制即可演示效果。
