如何解决如何检测所选文本是否在可编辑区域中?
程序员的幻想
我创建了一个简单的用户脚本来快速处理我选择的文本。它是这样的:
- 我从
p
元素中选择一个词、一个网站(不一定是链接)或短语 - 当我按下触发键时,算法会尝试确定它是网站还是文本。它将打开一个选项卡:如果它是一个网站,那就是它会加载的内容;如果是文本,它会用谷歌搜索。
问题露出丑陋的脑袋
除了我在编辑文本时,它都很好用。如果我正在编辑我在 textarea
/input
中编写的内容,它会触发,可能会丢失我写的内容。幸运的是,通常有缓存,甚至站点会警告我有未保存的更改,这样我就不会丢失我写的任何内容。但它需要修复。
挑战
用户脚本应该只在无法编辑的文本上运行。如果所选文本位于 textarea
内,您会认为这与不调用该函数一样简单。但是有很多方法可以在不使用经典元素的情况下显示可编辑内容。我发现的“最佳”过滤器是检查 document.activeElement.isContentEditable
。但是,在这个框中,它返回 false
。这是一个 textarea
元素,因此我可以将其添加到过滤器中,并且可以使用我能想到的更多元素来实现。但除了是一个丑陋的解决方案之外,它也不是万无一失的。
除了添加“你是不是不小心撞到我了?”提示,有没有更好的方法来做到这一点?
解决方法
如果我理解正确......这是一个如何去做的例子。
if (['TEXTAREA','INPUT'].includes(document.activeElement.nodeName)) {
// it is in textarea,input
}
else if (document.activeElement.isContentEditable) {
// it is in contentEditable element
}
else {
// not above
}
以上不是唯一的方法,例如以下使用 window.getSelection()
:
const sel = window.getSelection();
const text = sel.toString();
if (!text.trim()) {
// there is no selection
// or selection is white-space
// or selection is in textarea,input
}
else if (document.activeElement.isContentEditable) {
// it is in contentEditable element
}
else {
// not above
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。