滑鼠右鍵自定義功能菜單将滑鼠選中内容填充至輸入框

由于思路比較簡單而且代碼中注釋很詳細，就不多做解釋。
<!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檔案複制即可示範效果。