对textarea选中内容区域右键自定义菜单功能

GitChat 发布于2019-08-22 13:47 / 3223人阅读

想要实现一个功能，对textarea里面的内容，右键选中内容，出现自定义菜单，类似添加p标签、添加span标签、添加h1-h6标签，之后可以对选中的Neri前后添加上对应的标签，类似于

实现思路：
1：阻止默认右键事件
2：利用contextmenu事件自定义右键功能，显示自定义菜单
3：点击自定义菜单里的标签，对选中区域前后区域提那家上对应标签
4：添加完之后影藏自定义菜单

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

selectionStart:获取或设置当前所选内容的起始位置的字符索引。
selectionEnd:获取或设置当前所选内容的末尾位置的字符索引。

Code如下：




    
    选中右键加标签
    


    
                        能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间  能不能给我一首歌的时间
                能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间  能不能给我一首歌的时间
                能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间  能不能给我一首歌的时间
                能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间  能不能给我一首歌的时间
                能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间  能不能给我一首歌的时间
                能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间  能不能给我一首歌的时间
                能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间 能不能给我一首歌的时间  能不能给我一首歌的时间
        
    
    
        
            添加p标签
            添加div标签
            添加span标签
        
    
    
        请选择需要插入标签的内容区域

快来试试吧~

云服务器 GPU云服务器自定义右键菜单右键菜单右键菜单类 jquery右键菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92427.html

1、Eclipse开发工具 2、超市库存管理系统

摘要：的下载安装的下载安装下载安装只需要解压后就能使用卸载只需要将文件夹删除就可以了注意开发软件的安装目录中，尽量不要出现空格与中文的特点免费纯语言编写免安装扩展性强的工作空间和新建工程的工作空间和新建工程工作空间其实就是我们写的源代码所在的目录 01Eclipse的下载安装 * A: Eclipse的下载安装  * a: 下载 * http://ww...

Terry_Tai 2019-08-14 18:39 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

amuqiao 2019-08-23 10:51 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

DevTalking 2019-08-02 11:11 评论0 收藏0