触发eventlistener后延迟执行

Question

我是javascript的新手，并且有很多混淆......我正在尝试在Tampermonkey中编写一个脚本，它允许在触发“复制”事件监听器后将光标放在输入区域的末尾。这是我想要应用它的网站：https://voicenotebook.com/#medtrdiv原始代码是：

var input = document.querySelector('#docel');
var textarea = document.querySelector('#docel');
var reset = function (e) {
   var len = this.value.length;
    this.setSelectionRange(len, len);
};
input.addEventListener('copy', reset, false);
textarea.addEventListener('copy', reset, false);

问题是，如果我单击复制，它不会复制文本，但它会将光标放在最后。所以我猜问题是函数执行得太快了。

我想为这个功能添加一些延迟，但似乎没有任何效果。所以我认为解决方案是在触发eventlistener后将函数延迟100ms。这是我试过的：

var input = document.querySelector('#docel');
 var textarea = document.querySelector('#docel');
     var reset = function (e) {
     var len = this.value.length;
     this.setSelectionRange(len, len);
  };
 textarea.addEventListener('copy', setTimeout(reset, 100), false);
 input.addEventListener('copy', setTimeout(reset, 100), false);

我知道这可能根本没有意义。我也尝试了不同的东西。我已经研究过很多关于这方面的话题，但没有什么对我有用。能帮我解决一下吗？先感谢您！

Answer 1

您编写的代码中存在几个问题。

• id应该在页面上是唯一的。
• 你的意图是推迟setSelectionRange。当copy事件被触发时会发生这种情况。将setTimeout移动到reset函数内部。
• 如果你想从一开始就选择文本你也应该是0。

您的事件将在某个时间被触发，并且在事件处理程序中包装reset函数引用除了绑定事件处理程序之外什么都不做。

var input = document.querySelector('#docel1');
var textarea = document.querySelector('#docel2');

var reset = function(e) {
	var context = this;
  
  setTimeout(function() {
    var len = context.value.length;
    context.setSelectionRange(0, len);
  }, 100);
};

input.addEventListener('copy', reset, false);
textarea.addEventListener('copy', reset, false);

<input id="docel1" />
<textarea id="docel2" />