鼠标右键自定义功能菜单将鼠标选中内容填充至输入框

由于思路比较简单 而且代码中注释很详细，就不多做解释。

复制代码
<!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文件复制即可演示效果。

posted @   佛祖让我来巡山  阅读(397)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~

佛祖让我来巡山博客站 - 创建于 2018-08-15

开发工程师个人站，内容主要是网站开发方面的技术文章，大部分来自学习或工作，部分来源于网络,希望对大家有所帮助。

Bootstrap中文网

点击右上角即可分享
微信分享提示
SQL AI 助手