前端网页文本选中出现一个反馈按钮,鼠标点击之后可以进行文档反馈

Posted 一百个Chocolate

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端网页文本选中出现一个反馈按钮,鼠标点击之后可以进行文档反馈相关的知识,希望对你有一定的参考价值。

最近有一个需求,就是增强文档的反馈能力,类似于腾讯云文档一样,如图:


当我们选中一些文本之后,会有一个 文档反馈的 tooltip 提示框,点击之后会有表单提交,不过这个文档技术比较牛的点就是,点击反馈提示框之后,还会自动截屏,存放图片,方便管理者查看。

参考文章

先放出参考文章吧,还是 css 世界作者大佬的,虽然时间是 2011 年,但是那会实现的到现在依旧还是可以的,如果大家能看懂的话,可以直接看参考文章即可。

js页面文字选中后分享到新浪微博实现

我的解决代码

以下仅个人使用代码,大部分情况能够通用,最终效果得根据具体业务来落地,仅供参考。

var selectContent = '';
let selectedText = '';
let isFirstClick = true;

// 以下部分是获取选中文本,为什么再加一个函数获取?

// 1.大佬代码是函数内的
// 2.大佬代码当我点击出现弹框的时候,txt 会变为 '',获取不到选中文本了
document.onselectionchange = () => 
    const selection = document.getSelection();
    try 
        if (selection && selection.rangeCount > 0) 
            selectedText = selection.toString();
         else 
            selectedText = '';
        
     catch (error) 
        console.log(error);
    
;
document.addEventListener("mouseup", (e) => 
    if (selectedText.length > 0 && selectedText !== '' && isFirstClick) 
        selectContent = selectedText;
        isFirstClick = false;
     else 
        selectedText = '';
        isFirstClick = true;
    
);

// ----------- 分割线 ----------

var docsFeedBackFn = function (eleShare, eleContainer) 
    eleContainer = eleContainer || document;
    var funGetSelectTxt = function () 
        var txt = "";
        if (document.selection) 
            txt = document.selection.createRange().text; // IE
         else 
            txt = document.getSelection();
        
        return txt.toString();
    ;
    eleContainer.onmouseup = function (e) 
        e = e || window.event;
        var txt = funGetSelectTxt(),
            sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40,
            top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
        // 这个是我个人需求所需,根据需要改变
        const asideMenuLeftDom = document.getElementById('asideMenuLeft');
        if (txt) 
            eleShare.style.display = "block";
            eleShare.style.position = 'absolute';
            // 这个增减宽度是我个人需求所需,根据需要改变
            eleShare.style.left = left - asideMenuLeftDom.clientWidth - 130 + "px";
            // 这个增减宽度是我个人需求所需,根据需要改变
            eleShare.style.top = top - 130 + "px";
         else 
            eleShare.style.display = "none";
        
    ;
    eleShare.onclick = function () 
        // 个人需求所需,根据需要改变
        const $this = $(this);
        // xxx 点击之后弹窗
    ;
;
// 执行函数
docsFeedBackFn(document.getElementById('一般是选中之后出现的反馈按钮 ID'), document.getElementsByClassName('需要就填某个 className 或者 id 啥的,不需要就不传')[0]);

学如逆水行舟,不进则退

以上是关于前端网页文本选中出现一个反馈按钮,鼠标点击之后可以进行文档反馈的主要内容,如果未能解决你的问题,请参考以下文章

前端网页文本选中出现一个反馈按钮,鼠标点击之后可以进行文档反馈

手写板能在网页上写字吗

Javascript中,当鼠标点击选中某个文本输入框时,该文本框可以响应啥事件

outlook回复内容鼠标不能选中

浏览器怎么调整网页显示比例

autojs关闭没有关闭按钮的弹窗