使用 jQuery 继续将文本区域文本复制到剪贴板

Question

我在一段时间后实现自动保存数据到剪贴板的功能（在我的例子中，我习惯在 4 个空格后保存）。你可以建议间隔。

我已经按照this答案将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");
      } 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>

问题是文本仍然处于选中状态。如何取消选择文本？正如我在一个答案中看到的那样，我不想使用要创建的任何元素。

或者您能否建议不使用任何插件的另一种解决方案？

Answer 1

您可以使用document.getSelection().removeAllRanges();清除所选范围。我还添加了一些 jQuery 以将光标放回文本区域中文本的末尾。

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>

使用 jQuery 继续将文本区域文本复制到剪贴板

Continue copying textarea text to clipboard using jQuery

html

javascript

clipboard

jquery