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

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

1 个答案: