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

Question

我是 javascript 的新手，有很多困惑... 我正在尝试在 Tampermonkey 中编写一个脚本，一旦 "copy" 事件侦听器被触发，它允许将光标放在输入区域的末尾。这是我要应用它的站点：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 函数内部。
此外，如果你想 select 从一开始的文本，你的第一个参数应该是 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" />

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

Delay execution after eventlistener is triggered

javascript

addeventlistener

settimeout