问题标签 [contenteditable]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
1439 浏览

internet-explorer - 如何从 IE 中的 contentEditable div 中获取价值

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

0 投票
5 回答
11004 浏览

html - 避免 ie contentEditable 元素在 Enter 键上创建段落

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

0 投票
2 回答
525 浏览

javascript - 渐变填充内容 HTML 中的可编辑文本

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

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

让我可编辑

0 投票
1 回答
24000 浏览

javascript - 如何在内容可编辑的 DIV 中找到光标位置?

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

0 投票
7 回答
14302 浏览

html - 强制 IE contentEditable 元素在 Enter 键上创建换行符,而不破坏 Undo

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

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

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

0 投票
7 回答
20299 浏览

javascript - 使 Tab 键在 contentEditable div 中插入制表符而不是模糊

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

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

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

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

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

0 投票
3 回答
11968 浏览

javascript - Backspace 不会删除 Firefox 中 contenteditable DIV 的内部 html 标记

我创建了一个带有属性的 DIVcontenteditable=true并附加了子元素,比如spana属性contenteditable=false

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

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

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

0 投票
2 回答
8429 浏览

javascript - Firefox 的 getBoundingClientRect 问题

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

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

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

0 投票
2 回答
1358 浏览

mshtml - 使用mshtml设置contentEditable,防止选择div

我当前的项目涉及使用文档编辑器,无论好坏,它都是使用 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 问题让我担心我们目前的设置无法实现我想要的,但我要求帮助其他遇到类似问题的人。稍后我将添加一些我们提出的不完美的解决方案。

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

0 投票
2 回答
50371 浏览

javascript - 如何删除集中的 contenteditable pre 周围的边框?

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

谢谢