Continue copying textarea text to clipboard using jQuery

Question

I'm implementing the functionality of Autosaving data to clipboard after some interval (in my case I have used to save after 4 spaces). You can suggest interval.

I have followed this answer to copy textarea text to clipboard, here used a separate button to copy data to clipboard, however I want to save it continuously.

What I have tried so far:

var spaceCount = 0;
$('#description').keyup(function(event) {
  if (event.keyCode == 32) {
    ++spaceCount;
    if (spaceCount % 4 == 3) {
      $(this).select();
      try {
        var isCopied = document.execCommand('copy');
        console.log(isCopied);
        console.log("Copied to clipboard");
      } catch (e) {
        console.log("Error :Copying to clipboard");
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="description" cols="50" rows="4"></textarea>

The problem is the text remains selected. How can I deselect the text? I don't want to use any element to be created as I seen In one answer.

Or can you suggest another solution without using any plugin?

Why not use local storage? The clipboard is very volatile. see: https://www.w3schools.com/html/html5_webstorage.asp — AJ X., Aug 29 '17 at 12:55
@shantaram_t https://developer.mozilla.org/docs/Web/API/Window/localStorage — evolutionxbox, Aug 29 '17 at 12:59
@evolutionxbox I will try, and let you know if any problem, BTW thanks — Shantaram Tupe, Aug 29 '17 at 13:05
If you were to clear or overwrite my clipboard without me voluntarily asking for it - I would be very annoyed. — Stavm, Aug 29 '17 at 13:11

score 0 · Accepted Answer · answered Aug 29 '17 at 13:07

You can clear the selected range using document.getSelection().removeAllRanges();. I have also added a bit of jQuery to put the cursor back to the end of the text in the textarea.

var spaceCount = 0;
$('#description').keyup(function(event) {
  if (event.keyCode == 32) {
    ++spaceCount;
    if (spaceCount % 4 == 3) {
      $(this).select();
      try {
        var isCopied = document.execCommand('copy');
        console.log(isCopied);
        console.log("Copied to clipboard");

        // clear the selected range here
        document.getSelection().removeAllRanges();
        // put the cursor back at the end of the text 
        var val = $(this).val();
        $(this).focus().val("").val(val);

      } catch (e) {
        console.log("Error :Copying to clipboard");
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="description" cols="50" rows="4"></textarea>

Your solution is working, @axlj's comment changed my mind to use `window.localStorage` — Shantaram Tupe, Aug 29 '17 at 13:17

Continue copying textarea text to clipboard using jQuery

1 Answers1