文本区域选择是否更改？-前端问题

TextArea Selection Change?(文本区域选择是否更改？)

本文介绍了文本区域选择是否更改？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

对于HTML TextArea元素，如何获取对其中编辑的文本所做的所有选择更改的回调？

(我目前正在使用组合keyup、keypress和mousemove(用于拖动选择终结点)的技巧，也许可以添加更多，但这并不是很优雅。)

在HTML文档等中找不到它。

编辑：所谓"所有选择更改"，我的意思是包括使用鼠标选择期间的连续更改，而且我还希望在选择折叠时以及当只有一个移动的插入符号时获得回调(选择长度为零，但会发生变化)。我认为没有其他办法，只能通过组合许多事件来实现这一点。或者甚至使用间隔回调并简单地进行比较，但也不是很好。

推荐答案

您需要的是window或document上可用的全局selectionchange事件。阅读相关信息here。

将唯一ID添加到您的文本区域：

<textarea id="unique-id"></textarea>

向文档添加事件侦听器：

function handleSelection() {
  const activeElement = document.activeElement

  // make sure this is your textarea
  if (activeElement && activeElement.id === 'unique-id') {
    const range = {
      start: activeElement.selectionStart,
      end: activeElement.selectionEnd
    }
    // do something with your range
  }
}

document.addEventListener('selectionchange', handleSelection)

它将运行handleSelection函数中的任何代码。

这篇关于文本区域选择是否更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！