javascript – 移动 textarea 插入符号时执行

Posted 2023-05-07

【中文标题】javascript – 移动 textarea 插入符号时执行

【英文标题】：javascript – execute when textarea caret is moved

【发布时间】：2019-05-28 16:34:26

【问题描述】：

我有 textarea，我想更改说明插入符号（光标）后面是什么字符的文本。

<textarea id="text"></textarea>
<br/>
Character after the caret: <span id="char"></span>

我知道如何获得插入符号的位置。问题是我不知道当用户移动插入符号时会调用什么事件（通过键入、按箭头键、单击、粘贴文本、剪切文本……）。

【问题讨论】：

你能解释一下你的问题的背景吗？有人可能会为您的 XY 问题提出不同的解决方案。

也许您可以将本文中的解决方案之一与 textarea 的更改事件一起使用：***.com/questions/7745867/…

@kSp 是的，我知道该怎么做。请看我的编辑。

【参考方案1】：

我认为没有内置事件可以检查，但您可以使用 keypress、mousedown 和其他可以触发插入符号位置更改的事件的组合，然后检查更改textarea 的selectionStart（表示插入符号的位置）：

const textarea = document.querySelector('textarea');
textarea.addEventListener('keypress', checkcaret); // Every character written
textarea.addEventListener('mousedown', checkcaret); // Click down
textarea.addEventListener('touchstart', checkcaret); // Mobile
textarea.addEventListener('input', checkcaret); // Other input events
textarea.addEventListener('paste', checkcaret); // Clipboard actions
textarea.addEventListener('cut', checkcaret);
textarea.addEventListener('mousemove', checkcaret); // Selection, dragging text
textarea.addEventListener('select', checkcaret); // Some browsers support this event
textarea.addEventListener('selectstart', checkcaret); // Some browsers support this event

let pos = 0;
function checkcaret() 
  const newPos = textarea.selectionStart;
  if (newPos !== pos) 
    console.log('change to ' + newPos);
    pos = newPos;
  

<textarea></textarea>

【讨论】：

我认为也没有什么可以做的。所以我必须监听所有移动插入符号的事件（keyup，keypress，cut，paste，mousemove，click，...）。

你应该使用（而不是click）mousedowntouchstarttouchmove等等等等...另外，它是caret，而不是carat?

我还需要keyup 用于箭头键移动（linux、firefox 80.0）。

【参考方案2】：

在选择变化时有一个事件，selectionchange。

selectionchange 事件是一个全局事件，因此可以在任何元素上添加侦听器，尽管有一个实验性功能，即输入元素和 textarea 元素上的事件侦听器仅侦听该元素内选择的变化。目前仅 Firefox 支持实验版本。

然后可以通过getSelection() 访问选择。在少数浏览器中，如果选择位于 input 或 textarea 元素内，这将返回 undefined，因此如果 getSelection() 返回 undefined，selectionStart 和 selectionEnd 将起作用。

全局 selectionchange 事件示例：

let counter = 0;

document.addEventListener("selectionchange", function () 
  document.querySelector("#counter").textContent = ++counter;
)

<textarea>sample text</textarea>
<p>sample text in a paragraph</p>
<p contenteditable>a paragraph you can edit</p>

<p><code>selectionchange</code> events: <span id="counter">0</span></p>

【讨论】：

（非常感谢您的回答。） 好吧，因为这仍然是实验性功能（我们通常不希望我们的用户会使用升级版的浏览器）迄今为止，除非我们正在开发类似 Intranet 的东西），否则使用起来并不是绝对安全的。但可以将此方法与this one 结合使用。

我认为无论如何都值得添加到线程中，因为如果出于您的目的，您只关心较新的浏览器，这是一种更简单的方法。

注意：selectionchange 不会在退格、回车、删除键等时触发。

@Manne，当然，这没有问题。 *** 是一个非常开放的地方，可以为已解决的问题找到更好或替代的解决方案。