Question about "replace()" and clipboard in Javascript

53 views Asked by At

I am using replace() to replace the bullet points in a text field. It shows up correctly in the console.log but when I use the end function to copy and paste the string into a new text field, it reverts to the original version.

The end goal of the js code is to use a mouse event to copy a selection of text and then be able to paste it into another text field/text editor.

var tooltip, // global variables oh my! Refactor when deploying!
    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)
}

function getSelectionText(){
    var selectedText = ""
    if (window.getSelection){ // all modern browsers and IE9+
        selectedText = window.getSelection().toString().replace("•","");
        //console.log(selectedText) 
    }
    return selectedText
  }

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
}

createtooltip() // create tooltip by calling it ONCE per page. See "Note" below
var copyText = document.getElementById('output')
copyText.addEventListener('mouseup', function(e){
    var selected = getSelectionText() // call getSelectionText() to see what was selected
    if (selected.length > 0){ // if selected text length is greater than 0
        var copysuccess = copySelectionText() // copy user selected text to clipboard
        showtooltip(e)
    }
}, false)

I have tried changing the syntax of the code, moving the return values around and other string methods. If anyone can help me figure this out I would really appreciate it!

0

There are 0 answers