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

Posted 2022-02-23 一百个Chocolate

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

当我们选中一些文本之后，会有一个 文档反馈的 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]);

学如逆水行舟，不进则退