触发事件监听器后延迟执行

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);

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

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

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" />