jquery copy to clipboard and then undo after a few seconds

Question

I have the following function that copies text in a div to the clipboard. After 3 seconds I would like it to deselect the text. I can't get it to deselect the text in the div via the setTimeout. I have tried blur, trigger and click. Is there a solution?

function copyUsingJquery(element_id) {
        $(element_id).attr("contenteditable", true)
          .select()
          .on("focus", function () {
              document.execCommand('selectAll', false, null)
          })
          .focus();
        document.execCommand("Copy");
        $(element_id).removeAttr("contenteditable");

        setTimeout(function () {
            //deslect text on page after a few seconds
            $(element_id).trigger("click");
        }, 3000);

    }

TheMintyMate, tried didn't work. Jon Uleis that worked! Thanks! — Rob, Sep 17 '18 at 21:49

score 0 · Answer 1 · answered Sep 17 '18 at 21:50

Working solution:

       function copyUsingJquery(element_id) {
            $(element_id).attr("contenteditable", true)
              .select()
              .on("focus", function () {
                  document.execCommand('selectAll', false, null)
              })
              .focus();
            document.execCommand("Copy");
            $(element_id).removeAttr("contenteditable");

            setTimeout(function () {
                //deslect text on page after a few seconds
                //$(element_id).trigger("blur");
                window.getSelection().removeAllRanges();
            }, 3000);    
        }

score 0 · Answer 2 · answered Sep 17 '18 at 22:02

You don't need jQuery for this. Here's a direct translation of your jQuery code.

const unselect = () => window.getSelection().removeAllRanges()

function copyWithoutJQuery(elementId) {
  const el = document.getElementById(elementId)
  el.setAttribute('contenteditable', true)
  el.addEventListener('focus', () => {
    document.execCommand('selectAll', false, null);
    document.execCommand('Copy');
    el.removeAttribute('contenteditable');
    setTimeout(unselect, 3000);
  })

  el.focus();

  const range = document.createRange();
        range.selectNodeContents(el);
  const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
}

jquery copy to clipboard and then undo after a few seconds

2 Answers2