问题标签 [contenteditable]

我正在尝试创建一个非常简单的 contentEditable div 输入。但是，我能想到的任何获取输入值的方法都不完全是用户在 IE 中键入的内容，因为空格已折叠。即“你好世界”变成“你好世界”。但对我来说很重要的是，如果可能的话，我能够在用户输入文本时获取文本。任何想法我怎么能做到这一点？

在 InternetExplorer 上，contentEditable DIV 会在<p></p>您每次按 Enter 时创建一个新段落 ( )，而 Firefox 会创建一个<br/>标签。是否可以强制 IE 插入 a<br/>而不是新段落？

我可以在不使用图像的情况下在 HTML 中产生这种效果吗？

文本应该可以使用此效果进行编辑。

我正在为内容可编辑的 DIV 编写一个自动完成器（需要在文本框中呈现 html 内容。因此首选使用 contenteditable DIV 而不是 TEXTAREA）。现在我需要在 DIV 中有 keyup/keydown/click 事件时找到光标位置。这样我就可以在该位置插入 html/文本。我不知道如何通过一些计算找到它，或者是否有本机浏览器功能可以帮助我在内容可编辑的 DIV 中找到光标位置。

在 Internet Explorer 上，contentEditable DIV 会在<p></p>您每次按 Enter 时创建一个新段落 ( )，而 Firefox 会创建一个<br/> 标签。

正如这里所讨论的，可以使用 JavaScript 拦截 Enter keyPress 并使用 range.pasteHTML 创建一个<br/>代替。但是这样做会破坏撤消菜单；一旦您按 Enter 键，您就无法再撤消超过该点。

如何强制 contentEditable 元素在 Enter 上创建单个换行符而不破坏 Undo？

我正在通过设置contentEditable=true一个 div 来构建一个简单的文本编辑器（无论如何我认为 textarea 的行为方式相同）并且我在 tab 键上有一些问题。

我想要的是，当用户按下 tab 键时，焦点仍然在 div 上，并且一个 tab 字符被添加到文本中。

我通过preventDefault()在 keydown 上调用事件对象解决了问题的第一部分，现在 div 没有失去焦点，但我不知道为什么我不能插入字符。

tab char 的实体代码是，	但如果我尝试将此字符串添加到 innerHTML Firefox，则将其替换为一个简单的空格（而 不仅仅是一个空格）。我也试过，\t但结果是一样的。

所以我的问题是，如何在文本中插入制表符？

我创建了一个带有属性的 DIVcontenteditable=true并附加了子元素，比如span和a属性contenteditable=false。

想测试是否使用单个退格键删除了整个节点，令我惊讶的是 Firefox 无法删除这些元素。

此外，这在除 Firefox 之外的所有主要桌面浏览器中都可以正常工作。
关于此的任何线索或可能的解决方法是什么？

在这里找到关于 bugzilla 的确切问题。

我正在尝试使用 getBoundingClientRect() 在 contenteditable div 中获取光标的 y 坐标。代码的 IE 分支工作，但另一个分支（即 Firefox 3.5 用于我当前的测试目的）不工作。

下面的代码在注释中有问题的行用 *** 标记。在代码中，selObj 和 selRange 都有一个值（在 Firebug 中确认），但我不能在其中任何一个上调用 getBoundingClientRect() （例如，selObj.getBoundingClientRect 不是一个函数）。我已经读到 getBoundingClientRect() 现在在 Firefox 上支持 Range 对象，但我无法让它工作。我想我一定是在错误类型的对象上调用它......？我应该怎么称呼它？

以下代码是包含相关 javascript 的 html 文件的完整测试用例。在 IE 中查看，我得到了光标 y 坐标的值，但在 Firefox 中它会弹出。

我当前的项目涉及使用文档编辑器，无论好坏，它都是使用 mshtml 实现的，并将 contentEditable 设置为 true。我们当然正在考虑用其他东西替换这个设置，但目前假设它不是一个选项。

万一这很重要，我们正在使用 VS 2008 (.Net 3.5) 和 C# 执行此操作：

我们希望将大部分结构编辑隐藏在 UI 后面，但让用户以任何他们喜欢的方式编辑文本。当我们添加具有多种样式中的任何一种的 div 时，就会出现问题：

（添加一个 body 标记来模拟我们正在以编程方式执行的操作，因此您可以在 IE 中进行测试，但请记住我们正在使用 C#/.Net/VS。）

这有两个问题：

1. 用户的第一次点击选择了 div。我们希望点击直接转到文本，并且永远不要让用户看到调整大小的句柄。
2. 如果用户将光标放在 Other Text 中，然后尝试使用键盘移动到 div 文本，则会被阻止。当您在它之外四处移动时，该 div 被视为一个字符。

那么，有效地，有没有办法让 div 表现得像一个背景装饰，但它周围的一切仍然是可编辑的？这个 html 是完全内部的，所以我们可以用它做任何我们喜欢的事情。所以 div 本身并不重要。重要的是我们：

• 包含多个 P 或其他标签
• 直观地向用户展示所有包含的 P 或其他标签都是一组的一部分，就像当前 div 上的边框和背景颜色这样的样式现在完成了。

这个 SO 问题让我担心我们目前的设置无法实现我想要的，但我要求帮助其他遇到类似问题的人。稍后我将添加一些我们提出的不完美的解决方案。

可能与否，感谢您的任何想法。

当我将 pre 元素设置为 contenteditable 并将焦点放在其中进行编辑时，它会收到一个看起来不太好的虚线边框。当焦点在其他地方时，边界不存在。
如何删除该边框？

谢谢