0

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!

2
  • Well you process the selection, but then you call copySelectionText() which goes back to the unedited source. Commented May 9, 2023 at 20:59
  • The problem is, mutating the selectedText variable does not change what's copied onto the clipboard. So instead, you can do the replacing when you are pasting into the new text field. eg. newTextField.value = getSelectionText().replace... Commented May 9, 2023 at 22:25

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.