时间戳

首页 > 解决方案 > 在某些网站上无法在注入的 contenteditable div 中键入空格

javascript - 在某些网站上无法在注入的 contenteditable div 中键入空格

问题描述

我正在开发一个 Chrome 扩展程序，它通过 shadowDOM 将 contentEditable div 注入网站（想想页面顶部的输入字段）。但是，将内容脚本注入 YouTube 时，无法在 contentEditable 中键入空格。到目前为止，我还没有在任何其他网站上遇到过这个问题。

这可能是什么原因？

到目前为止的方法：

  1. 有效的是捕捉空间keydown事件并以 编程方式将一个插入符号位置。我想知道是否有更优雅和更精简的解决方案，而且我仍然想知道这个问题的原因是什么。

要重现，请在youtube.com上注入 contenteditable并尝试添加更多空间。

const div = document.createElement('div')
div.contentEditable = true
div.style.background = '#fff'
div.style.color = '#000'
div.style.height = '200px'
div.style.fontSize = '48px'
div.style.position = 'relative'
div.style.zIndex = '999999'
div.innerHTML = `It's not possible to add any more spaces...`
document.body.prepend(div)

标签： javascriptdomwhitespacecontenteditable

解决方案

推荐阅读