Poursuivre la copie de textarea texte dans le presse-papiers en utilisant jQuery

Question

J'implémente la fonctionnalité de sauvegarde automatique des données dans le presse-papiers après un certain intervalle (dans mon cas, j'ai l'habitude d'enregistrer après 4 espaces). Vous pouvez suggérer l'intervalle.

J'ai suivi this réponse pour copier textarea texte dans le presse-papiers, ici utilisé un bouton séparé pour copier des données dans le presse-papiers, mais je veux le sauvegarder en continu.

Ce que j'ai essayé jusqu'à présent:

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>

Le problème est le texte reste sélectionné. Comment puis-je désélectionner le texte? Je ne veux utiliser aucun élément à créer comme je l'ai vu dans une réponse.

Ou pouvez-vous suggérer une autre solution sans utiliser de plugin?

Answer 1

Vous pouvez effacer la plage sélectionnée à l'aide de document.getSelection().removeAllRanges();. J'ai aussi ajouté un peu de jQuery pour replacer le curseur à la fin du texte dans la zone de texte.

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>