對textarea選中內容區域右鍵自定義菜單功能

時間 2019-12-05

標籤 textarea 選中內容區域右鍵自定義菜單功能简体版

原文原文鏈接

想要實現一個功能，對textarea裏面的內容，右鍵選中內容，出現自定義菜單，相似添加p標籤、添加span標籤、添加h1-h6標籤，以後能夠對選中的Neri先後添加上對應的標籤，相似於html

實現思路：
1：阻止默認右鍵事件
2：利用contextmenu事件自定義右鍵功能，顯示自定義菜單
3：點擊自定義菜單裏的標籤，對選中區域先後區域提那家上對應標籤
4：添加完以後影藏自定義菜單spa

注意：主要是用了HTML5新增的contextmenu屬性（上下文菜單），code

selectionStart:獲取或設置當前所選內容的起始位置的字符索引。
selectionEnd:獲取或設置當前所選內容的末尾位置的字符索引。

Code以下：htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選中右鍵加標籤</title>
    <style>
        body{
            position:relative;
        }
        .container {
            width: 500px;
            margin: auto;
        }
        #text {
            width: 500px;
            height: 250px;
            resize: none;
            padding: 5px;
            line-height: 25px;
            font-size: 14px;
        }
        #rightmenu{
            position:absolute;
            width: 100px;
            font-size: 12px;
            display: none;
            border:1px solid;
            border-radius: 4px;
            z-index: 100;
        }
        #infoMessag{
            position: absolute;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            display: none;
            border: 1px solid;
            background: #fff;
            z-index: 100;
            padding: 0 5px;
            border-radius: 4px;
        }
        #rightmenu li{
            cursor: pointer;
            height: 30px;
            line-height: 30px;
            background-color: white;
            padding-left: 5px;
        }
        #rightmenu li:hover{
            background-color: silver;
        }
        ul,li{
            margin:0;
            padding:0;
            list-style: none;
        }

    </style>
</head>
<body>
    <div class="container">
        <textarea name="" id="text" cols="80" rows="10">
                能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間  能不能給我一首歌的時間
                能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間  能不能給我一首歌的時間
                能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間  能不能給我一首歌的時間
                能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間  能不能給我一首歌的時間
                能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間  能不能給我一首歌的時間
                能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間  能不能給我一首歌的時間
                能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間 能不能給我一首歌的時間  能不能給我一首歌的時間
        </textarea>
    </div>
    <div id = 'rightmenu' tabindex = "-1">
        <ul id='clicklist'>
            <li class = "click-list">添加p標籤</li>
            <li class = "click-list">添加div標籤</li>
            <li class = "click-list">添加span標籤</li>
        </ul>
    </div>
    <div id = "infoMessag">
        <span>請選擇須要插入標籤的內容區域</span>
    </div>
</body>
<script>
    //textarea右鍵編輯功能
    document.oncontextmenu = function(e){
        return false;
    }
    text.addEventListener('contextmenu',function(e){
        var from = text.selectionStart;
        var to = text.selectionEnd;
        if(from<to){
            rightmenu.style.display = 'block';
            rightmenu.style.left = e.pageX+'px';
            rightmenu.style.top = e.pageY+'px';
            rightmenu.focus();
            e.preventDefault()
        }else if(from == to){
            infoMessag.style.display = 'block';
            infoMessag.style.left = e.pageX + 'px';
            infoMessag.style.top = e.pageY + 'px';
            infoMessag.focus();
            e.preventDefault();
            setTimeout(function () {
                infoMessag.style.display = 'none';
            },1000);
        }
    })
    clicklist.addEventListener('click',function(e){
        var lists = clicklist.querySelectorAll('li');
        switch(e.target){
            case lists[0]:
                insert('p');
                break;
            case lists[1]:
                insert('div');
                break;
            case lists[2]:
                insert('span');
                break;
            default:
                break;
        }
        rightmenu.style.display = 'none'
    })

    rightmenu.addEventListener('blur',function(){
        rightmenu.style.display='none';
    });
    function insert(tag){
        var val = text.value,len = tag.length;
        var from = text.selectionStart,to = text.selectionEnd;
        var before = val.slice(0,from),after = val.slice(to),selected = val.slice(from,to);
        inserted = `<${tag}>${selected}</${tag}>`;
        text.value = before + inserted + after;
        text.select();
        text.selectionEnd = to + 5 + len * 2
        text.selectionStart = from
    }
</script>
<html>

快來試試吧~索引