使用工具提示复制到剪贴板突出显示的文本

时间:2018-08-16 12:53:03

标签: javascript

我有一些JavaScript可以将用户突出显示的内容自动复制到剪贴板。效果很好。我的问题更多是我的工具提示弹出了1/2秒并说“复制!”。然后应该消失了。如果我按住鼠标按钮并在文本上滚动以突出显示该文本,则工具提示不会消失,但是如果我双击或三次单击表格单元格中的一个以突出显示该单元格中的所有文本,则工具提示会出现并保留。有人可以告诉我我做错了什么。如果我的描述不合理,请提供jpeg triple click highlighting tooltips

这是相关的javascript

<script>
function getSelectionText(){
    var selectedText = ""
    if (window.getSelection){ // all modern browsers and IE9+
        selectedText = window.getSelection().toString()
    }
    return selectedText
}
</script>
<script>
function copySelectionText(){
    var copysuccess // var to check whether execCommand successfully executed
    try{
        copysuccess = document.execCommand("copy") // run command to copy selected text to clipboard
    } catch(e){
        copysuccess = false
    }
    return copysuccess
}
</script>
<script>
document.addEventListener('mouseup', function(e){
    createtooltip() // create tooltip by calling it ONCE per page.
    var thetext = getSelectionText()
    if (thetext.length > 0){ // check there's some text selected
        var copysuccess = copySelectionText() // copy user selected text to clipboard
        showtooltip(e)
    }
}, false)
</script>
<script>
var tooltip, hidetooltiptimer

function createtooltip(){ // call this function ONCE at the end of page to create tool tip object
    tooltip = document.createElement('div')
    tooltip.style.cssText = 
        'position:absolute; background:black; color:white; padding:4px;z-index:10000;'
        + 'border-radius:2px; font-size:12px;box-shadow:3px 3px 3px rgba(0,0,0,.4);'
        + 'opacity:0;transition:opacity 0.3s'
    tooltip.innerHTML = 'Copied!'
    document.body.appendChild(tooltip)
}

function showtooltip(e){
    var evt = e || event
    clearTimeout(hidetooltiptimer)
    tooltip.style.left = evt.pageX - 10 + 'px'
    tooltip.style.top = evt.pageY + 15 + 'px'
    tooltip.style.opacity = 1
    hidetooltiptimer = setTimeout(function(){
        tooltip.style.opacity = 0
    }, 500)
}
</script>

谢谢。

0 个答案:

没有答案