contenteditable 相关问题

如何在线程上写入contenteditable div

我正在尝试创建一个 Chrome 扩展程序，可以将文本写入 Threads.net 上线程的“回复”字段。这是一个内容可编辑的 div，据我所知，我需要编辑下一个 p 的文本

在compositionend事件中调用preventDefault方法没有效果

var tempNode = document.getElementById('view_1'); tempCNode.addEventListener('compositionend', function(e) { console.log(e.cancelable); // 真的 e.preventDefault(); }); var tempNode = document.getElementById('view_1'); tempCNode.addEventListener('compositionend', function(e) { console.log(e.cancelable); // true e.preventDefault(); }); <div id="view_1" class="view" contenteditable="true"> <p> <br> </p> </div> 我想获取输入法的值，不让它直接显示在div中。 我该怎么办？ 谢谢 我最近遇到了这个问题。这是我的理解： 在 JavaScript 的 'compositionend' 事件中使用 'e.preventDefault() ' 在技术上是可行的，但可能不会达到您期望的效果。根据Stack Overflow讨论，在compositionend事件中调用preventDefault没有任何效果。这可能是因为合成结束事件表示合成会话的结束，并且此时阻止默认操作可能没有意义，因为输入合成已经完成。 如果您尝试控制或修改文本输入的行为，则可能需要使用其他事件，例如“input”、“keydown”或“compositionstart”。但是，具体方法取决于您想要实现的目标。

在 contentEditable div 中使用 jQuery 清理粘贴事件

我正在尝试清理 contentEditable div 中的粘贴。也就是说，代码应如下所示： $('#content').bind('粘贴',函数(e) { // 确保粘贴的标记有效 ...

将占位符插入符号置于 contentEditable 元素的中心

我有以下内容：http://jsfiddle.net/mb76koj3/。 [contentEditable=true]:空::之前{ 内容：attr（数据-ph）； 颜色：#CCC； 文本对齐：居中； } h1 { 文本对齐：居中； ...

React ul contenteditable 的状态管理问题

我正在尝试创建一个自定义表单字段，它将字符串数组显示和编辑为可编辑的 ul 列表 - 该字段为数组中的每个字符串项创建一个项目符号。 问题是当我尝试做人时...

React ul contentediable 的状态管理问题

我正在尝试创建一个自定义表单字段，它将字符串数组显示和编辑为可编辑的 ul 列表 - 该字段为数组中的每个字符串项创建一个项目符号。 问题是当我尝试做人时...

双击内容可编辑元素进行聚焦（看起来并不那么容易）

我长期以来一直在寻找这个问题的解决方案，所以我现在要在这里问。 从普通的 contenteditable div 元素开始，如下所示： 编辑此... 我长期以来一直在努力寻找这个问题的解决方案，所以我现在要在这里问。 从普通的可内容编辑的 div 元素开始，如下所示： <div contenteditable>Edit this text</div> 如果单击文本，您将可以将光标放在单击的位置进行编辑。 现在，我不希望文本在第一次单击时可编辑，并且我根本不希望在元素未聚焦时能够与文本进行交互。我可以通过禁用 div、使用 CSS 或覆盖元素将内容编辑为可编辑来实现此目的。 我现在希望该元素再次可编辑双击时，其行为与正常单击该元素所期望的行为完全相同。让我们使用 JavaScript 和 EventListener 来实现 onmousedown 或 ondblclick。 示例1 <div id="wrapper"> <div id="overlay"></div> <div id="editable" contenteditable>Edit this text</div> </div> overlay.ondblclick = () => { overlay.style.display = 'none'; editable.focus(); }; // use onblur to restore the overlay 这可行，但光标将位于元素的开头。如果您不使用 focus()，则必须第三次单击才能聚焦该元素。 示例2 <div id="editable" contenteditable="false">Edit this text</div> editable.ondblclick = () => { editable.setAttribute('contenteditable', true); }; // use onblur to set contenteditable to false again // additional CSS will prevent being able to interact with the text if not focused 这可行，但您将选择要单击的单词，而不是将文本光标放在那里。 这是一个私人项目，可访问性、兼容性等并不重要。 经过几个小时的研究，我得出了这个解决方案： const editable = document.getElementById('editable'); editable.ondblclick = (event) => { if (document.activeElement === event.target) return; editable.setAttribute('contenteditable', true); selectRange(getMouseEventCaretRange(event)); } function getMouseEventCaretRange(event) { if (event.rangeOffset !== undefined) { // The new fancy Firefox-only way that doesn't even have documentation let range = document.createRange(); range.setStart(event.rangeParent, event.rangeOffset); range.collapse(true); return range; } else if (document.caretPositionFromPoint) { // The 'official' way (only used by Firefox) that doesn't even position the cursor correctly // VSC keeps telling me the method doesn't exist let pos = document.caretPositionFromPoint(event.clientX, event.clientY); let range = document.createRange(); range.setStart(pos.offsetNode, pos.offsetX); range.collapse(true); return range; } else if (document.caretRangeFromPoint) { // The 'deprecated WebKit-proprietary fallback method' (used by every mf browser out there) return document.caretRangeFromPoint(event.clientX, event.clientY); } } function selectRange(range) { const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } * { font-family: monospace; } #editable { font-size: 1.5rem; } #editable[contenteditable="false"] { user-select: none; cursor: pointer; } #editable[contenteditable="false"]::selection { background-color: transparent; } <div id="editable" contenteditable="false" onblur="this.setAttribute('contenteditable', false);">Double click to edit this text</div> <ul> <li>Caret is placed where clicked, not at the start</li> <li>Double clicked word is not highlighted</li> <li>Text can not be interacted with if the element isn't focused</li> </ul> 它又长又复杂，但很有效。在我看来，这个 API 完全混乱了。我希望这可以帮助将来的人。 不需要任何复杂的事情，只需在添加可编辑内容时防止双击操作，同时确保其处于焦点即可。 document.addEventListener('mousedown', (event) => { if (event.detail > 1) { // double-clicked const e = event.target; if (e.id === "content" && !e.contenteditable) { e.contentEditable = true; event.preventDefault(); e.focus(); } } }, false); <div id="content">Edit this text</div>

如何在 contentEditable div 中的 p 标签中添加新行

我有一个 contentEditable div，每当我通过按 Enter 或 shift+enter 插入新行时，新行是 div 中的 textNode，但我希望新行位于 p 元素中。 我想要一个简单的解决方案...

将焦点设置在 div 内容可编辑元素上

我有一个，我用所见即所得的方式定义了一些元素。例如，等。我想直接将焦点放在这些元素之一上。 例如... 我有一个 <div contenteditable=true>，我通过所见即所得定义了一些元素。例如<p>、<h1>等。我想直接将焦点放在其中一个元素上。 例如<p id="p_test">。但似乎focus()功能不适用于<div>元素，<p>元素... 在我的案例中还有其他方法来定义焦点吗？ 旧帖子，但没有一个解决方案对我有用。不过我最终还是明白了： var div = document.getElementById('contenteditablediv'); setTimeout(function() { div.focus(); }, 0); 在现代浏览器中您可以使用： var p = document.getElementById('contentEditableElementId'), s = window.getSelection(), r = document.createRange(); r.setStart(p, 0); r.setEnd(p, 0); s.removeAllRanges(); s.addRange(r); 但是如果你的元素是空的我会遇到一些奇怪的问题 所以对于空元素你可以这样做： var p = document.getElementById('contentEditableElementId'), s = window.getSelection(), r = document.createRange(); p.innerHTML = '\u00a0'; r.selectNodeContents(p); s.removeAllRanges(); s.addRange(r); document.execCommand('delete', false, null); 删除nbsp后光标停留在p元素内 附注只是普通的空间不适合我 我注意到 jQuery focus() 不适用于宽度和高度为 0 的 contenteditable DIV。我将其替换为 .get(0).focus() - 原生 javascript focus 方法 - 并且它有效。 很多时候如果你无法在某个元素上调用 .focus()，那是因为 tabIndex 为 -1，这意味着当你按 Tab 导航时 Tab 键无法聚焦到该元素。 将 tabIndex 更改为 >= 0 将使您专注于元素。如果您需要动态执行此操作，只需将 tabindex >= 0 添加到事件侦听器中的元素即可。 你可以试试这个代码，它可以自动聚焦在你最后插入的位置。 let p = document.getElementById('contenteditablediv') let s = window.getSelection() let r = document.createRange() r.setStart(p, p.childElementCount) r.setEnd(p, p.childElementCount) s.removeAllRanges() s.addRange(r) 在@Surmon answer的基础上进一步构建。如果您希望在文本中的最后一个字母/数字而不是最后一个插入位置之后自动聚焦（如果子节点包含在块类型标签而不是纯文本中，则最后一个插入位置会将光标移动到新行）然后应用这个小修改： r.setStart(p.lastChild, 1); r.setEnd(p.lastChild, 1); 这是一个扩展函数，用于检查编辑器/元素是否有任何子节点，并根据情况在末尾相应地设置光标： let p = document.getElementById('contenteditablediv'); p.focus(); // alternatively use setTimeout(() => { p.focus(); }, 0); // this is enough to focus an empty element (at least in Chrome) if (p.hasChildNodes()) { // if the element is not empty let s = window.getSelection(); let r = document.createRange(); let e = p.childElementCount > 0 ? p.lastChild : p; r.setStart(e, 1); r.setEnd(e, 1); s.removeAllRanges(); s.addRange(r); } 如果有人使用管理 contenteditable 元素的 MediumEditor 偶然发现这个问题，以下内容对我有用： editor.selectElement(editorDOMNode); editor 是 MediumEditor 的实例。 editorDOMNode 是对实际 contenteditable DOM 节点的引用。 还可以关注编辑器中的特定子节点，如下所示： editor.selectElement(editorDOMNode.childNodes[0]); 还有一件事需要检查：如果您打开了浏览器的控制台窗口，请确保加载页面时控制台没有焦点，否则页面上的元素将不会按预期获得焦点。 这似乎也意味着您无法在控制台中运行 document.querySelector('#your-elem').focus()（于 2020 年 8 月在 Mac 上使用 Chrome、Safari 和 Firefox 进行了尝试）。 请注意，click事件处理程序将需要单击一次来聚焦元素（不触发插入符号），然后再单击一次来触发插入符号。 setTimeout 和 .get(0) 等方法将无法按预期工作。 使用 mousedown 事件处理程序只需使用 focus() 调用即可按预期工作。无需其他解决方法。在 Windows/Chrome（鼠标）和 Android/Chrome（触摸）上进行了测试。 jQuery 示例： const ns = { focus: e => { let el = $(e.currentTarget); el.focus(); } } $(document).ready(() => { $('body').on('mousedown', '[contenteditable]', ns.focus); //use mousedown instead of click }); [contenteditable] { border-bottom: 1px solid lightgray; /* prevents shifting on select */ line-height: 1.2em; } [contenteditable]:focus { border-bottom: 1px solid black; /* prevents slight visual shifting on select */ outline: 1px solid transparent; } [contenteditable=true]:empty:not(:focus):before { content: attr(placeholder) '...'; font-style: italic; font-size: .9em; text-transform: lowercase; opacity: .7; font-weight: normal; color: lightgray; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div contenteditable=true placeholder="edit me"></div> <div contenteditable=true placeholder="edit me, too"></div> 将“click”事件处理程序绑定到 contenteditable div 中的所有元素，并更改单击时的类/样式（即向元素添加“focused”类）； 您可以通过添加彩色边框或内部框阴影等样式来向用户标识哪个元素具有焦点。然后，当您想要访问 jQuery 脚本中的焦点元素时，只需执行以下操作： var focused = $('.focused');

无法在 document.execCommand 中使用 insertHTML 设置 contentediable="false"

我有一个可满足的div。我构建了从我的计算机直接在 contentediable div 内上传图像的可能性。到这里为止一切都很完美。我把图像包裹在另一个里面......

Google Chrome 浏览器奇怪的光标在页面上闪烁，以前从未见过

由于我对在线违规更加偏执，最近注意到谷歌浏览器元素在点击时显示光标闪烁，这很诡异。 HTML 页面元素变得可编辑了吗？

Chrome 中 contenteditable 容器内不可编辑元素的奇怪行为

我有带有用户选择的非editbale跨度的标记：contenteditable div内没有。它的简化版本如下所示： 一些随机文本... 我有带有用户选择的非editbale跨度的标记：contenteditable div内没有。它的简化版本如下所示： <div contenteditable="true"> some random text <span contenteditable="false" style="user-select: none">1</span><span contenteditable="false" style="user-select: none">2</span> </div> 这里的关键点是两个跨度都在一条线上。当我将光标放在行尾并按 Backspace 时，所有内容都会被删除。当将跨度放在不同的行上时，代码按预期工作 - Backspace 仅删除最后一个不可编辑的元素。 Chrome 中出现问题。 FF 的行为也很奇怪，但方式不同。我现在只需要让它在 Chrome 中工作即可。 在标记中将跨度物理地放置在不同的行上可以解决问题，但这没有用，因为在我的例子中，我动态地将不可编辑的元素添加到 contenteditable 中。 const input = document.getElementById("snafu"); const button = document.getElementById("button"); const onClick = () => { const tag = document.createElement("span"); tag.setAttribute("contenteditable", false); tag.classList.add("xml-tag"); tag.innerHTML = "t"; input.append(tag); }; button.addEventListener("click", onClick); body { font-family: sans-serif; } .input { color: green; box-shadow: 2px 2px 10px mediumaquamarine; padding: 8px; border-radius: 8px; margin-bottom: 24px; } .xml-tag { display: inline-flex; justify-content: center; align-items: center; width: 16px; height: 16px; margin-inline: 2px; user-select: none; border-radius: 50%; background: lime; font-size: 10px; white-space: pre; } .button { background: transparent; box-shadow: 3px 3px 5px limegreen; border: none; border-radius: 8px; padding: 8px; } .button:hover { transform: scale(1.1); cursor: pointer; } <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <div id="app"> <div spellcheck="false" contenteditable="true" class="input" id="snafu"> <span>Add at least 2 non-editable tags by clicking the button below. Then put the cursor at the end of line and press 'Backspace'</span > </div> <button id="button" class="button">Add me a tag, daddy!</button> </div> <script src="src/index.js"></script> </body> </html> UPD：当我尝试编辑帖子代码片段按钮时，出现了，我最终能够添加片段。 监听文本区域的按键事件。如果按下退格键（或删除），则获取所有标签并暂时删除 user-select: none。然后添加一个 setTimeout(func, 0) 来恢复最后一个标签删除后的 user-select: none const input = document.getElementById("snafu"); const button = document.getElementById("button"); const onClick = () => { const tag = document.createElement("span"); tag.setAttribute("contenteditable", false); tag.classList.add("xml-tag"); tag.innerHTML = "t"; input.append(tag); }; button.addEventListener("click", onClick); // +++++ ADD THIS +++++ input.addEventListener("keydown", (event) => { // if backspace or delete pressed if (event.keyCode === 8 || event.keyCode === 46) { // make tags selectable, so they can be removed const tags = input.querySelectorAll(".xml-tag"); tags.forEach(tag => tag.style["user-select"] = "auto"); // make tags not selectable after deletion setTimeout(function() { tags.forEach(tag => tag.style["user-select"] = "none"); }, 0); } }); body { font-family: sans-serif; } .input { color: green; box-shadow: 2px 2px 10px mediumaquamarine; padding: 8px; border-radius: 8px; margin-bottom: 24px; } .xml-tag { display: inline-flex; justify-content: center; align-items: center; width: 16px; height: 16px; margin-inline: 2px; user-select: none; border-radius: 50%; background: lime; font-size: 10px; white-space: pre; } .button { background: transparent; box-shadow: 3px 3px 5px limegreen; border: none; border-radius: 8px; padding: 8px; } .button:hover { transform: scale(1.1); cursor: pointer; } <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <div id="app"> <div spellcheck="false" contenteditable="true" class="input" id="snafu"> <span >Add at least 2 non-editable tags by clicking the button below. Then put the cursor at the end of line and press 'Backspace'</span > </div> <button id="button" class="button">Add me a tag, daddy!</button> </div> </body> </html>

React - contentEditable 属性的 onChange 事件

我想使用像textarea一样保存用户输入。 我听说我需要使用 onInput 侦听器在输入更改时触发 fn 。 问题是... 我想使用 <div onInput={onChange} contentEditable> 来像文本区域一样保存用户输入。 我听说我需要使用 onInput 侦听器在输入更改时触发 fn 。 问题是当我用 React 状态更新文本时，它会不断地将插入符号移动到文本开头 这是我的代码 import React from "react"; const App = () => { const [value, setValue] = React.useState("I am edittable"); const onChange = (e) => { const html = e.target.innerHTML; setValue(html); }; return ( <div onInput={onChange} contentEditable> {value} </div> ); }; export default App; 代码沙盒 https://codesandbox.io/s/react-editable-cell-pwil6?file=/src/App.js:0-310 我该如何解决它？ 这有一个解决方案，但 onChange 不注册该事件。它不会改变状态。不要使用它！ 我的建议是使用 onInput，但不要使用状态变量作为可编辑元素的innerHTML。 设置一些默认值，contentEditable将处理innerHTML的变化，而onInput将根据innerHTML的值处理状态的变化。 如果你想确保innerHTML不会为空，你可以添加 onBlur 事件，该事件检查它是否为 ==="" 并将用默认值或其他值更新它，等等。 这已经很旧了，但我刚刚自己解决了这个问题，我想我会分享它。 onChange 永远不会触发，而 onInput 也不是最好的方法。你需要用 onFocus 和 onBlur 来模拟 onChange。 onFocus发生时将innerHTML的值复制到变量。 当onBlur发生时，针对变量测试innerHTML以查看它是否发生变化。如果是这样，请执行 onChange 操作。你需要这样的东西： const onFocus = (e) => { val_start = e.target.innerHTML; }; const onBlur = (e) => { if(val_start !== e.target.innerHTML) { //Whatever you put here will act just like an onChange event const html = e.target.innerHTML; setValue(html); } }; contentEditable 将使 div 内的内容可编辑。 您可以使用onInput代替使用onBlur，这样闪烁的光标就不会不断移动到文本开头。 您对文本所做的任何更改都将在屏幕上可见，并且一旦您将焦点移出元素，状态就会更新。 <div onBlur={onChange} contentEditable> {value} </div> 使用 React Hook Form 2023. 实现 Typescript。 tldr；下面为那些匆忙的人完成了代码。 注意：下面的代码是使用 zod 的较长代码的简化版本。为了简单起见，我删除了一些部分。 export const EmailForm: React.FC = () => { const {register, handleSubmit, formState: {errors}, setValue} = useForm(); // Optional: for when the <label> gets clicked const emailRef = useRef<HTMLDivElement>(null); const onSubmit = async (data: FieldValues) => { // Send data here. In catch statement use setError or formError console.log(data); } const onInput = (e: FormEvent<HTMLInputElement>) => { setValue('email', e.currentTarget.innerText); } return ( <form onSubmit={handleSubmit(onSubmit)}> {/* The actual field which react hook form validates */} <input type="hidden" {...register('email')} /> <div> <label onClick={() => emailRef.current?.focus()}>Email</label> <div contentEditable onInput={onInput} ref={emailRef} role="textbox" tabIndex={0}></div> <div>{errors.email?.message}</div> </div> <div> <button type="submit">Submit</button> </div> </form> ); } 本质上，您想要的是使 div 表现得像 <textarea>，同时保留功能。这样做的好处各不相同，但我通常这样做，这样它就会在用户键入时自动扩展。 使用 React Hook 表单注册 由于这是 React，我使用 RHF 来管理内容，因此我们需要在用户键入时填充一个隐藏字段。这也可以是 <textarea>，但只需确保它不可见即可。 <input type="hidden" {...register('email')} /> 处理数据 A <div> 不知道什么是 onChange 事件，但它对 onInput 事件响应良好，因此请使用它。还添加 role 和 tabIndex 以帮助提高可用性，如 在此 so 中所示。 <label onClick={() => emailRef.current?.focus()}>Email</label> <div contentEditable onInput={onInput} ref={emailRef} role="textbox" tabIndex={0}></div> 可选地，如果您想让 <label> 在像标签一样单击时聚焦在 <div> 上，则应使用 useRef 使其正常工作： const emailRef = useRef<HTMLDivElement>(null); 现在，每次用户输入内容时，onInput回调都会触发setValue函数，允许 RHF 访问数据，就像访问任何其他字段一样。这反过来又有助于生成错误消息： <div>{errors.email?.message}</div> 最后，当提交表单时，会触发 onSubmit 回调。从那里您可以将其发送到您的服务器。 这就是你需要具备的： <div onChange={onChange} contentEditable> 而不是 onInput 应该是 onChange 演示：https://codesandbox.io/s/react-editable-cell-forked-ey7o1?file=/src/App.js

如何可靠地拦截（并取消）contenteditable中的所有输入？

我需要捕获 contenteditable 元素中的所有输入并处理代码中的输入。基本上，我需要的是防止输入事件更改元素中的数据并知道数据是什么

Chrome 中可编辑容器内不可编辑元素的奇怪行为

我有以下标记 - 带有用户选择的非 editbale 跨度：contenteditable div 内无： 一些随机文本 我有以下标记 - 带有用户选择的非 editbale 跨度：contenteditable div 内无： <div contenteditable="true"> some random text <span contenteditable="false" style="user-select: none">1</span><span contenteditable="false" style="user-select: none">2</span> </div> 这里的关键点是两个跨度都在一条线上。当我将光标放在行尾并按 Backspace 时，所有内容都会被删除。当将跨度放在不同的行上时，代码按预期工作 - Backspace 仅删除最后一个不可编辑的元素。 Chrome 中出现问题。 FF 的行为也很奇怪，但方式不同。我现在只需要让它在 Chrome 中工作即可。 这是一个具有最小可重现示例的沙箱：https://codesandbox.io/s/dreamy-euler-9vsyll?file=/index.html 在标记中将跨度物理地放置在不同的行上可以解决问题，但这没有用，因为在我的情况下，我动态地将不可编辑的元素添加到 contenteditable 监听文本区域的按键事件。如果按下退格键（或删除），则获取所有标签并暂时删除 user-select: none。然后添加一个 setTimeout(func, 0) 来恢复最后一个标签删除后的 user-select: none const input = document.getElementById("snafu"); const button = document.getElementById("button"); const onClick = () => { const tag = document.createElement("span"); tag.setAttribute("contenteditable", false); tag.classList.add("xml-tag"); tag.innerHTML = "t"; input.append(tag); }; button.addEventListener("click", onClick); // +++++ ADD THIS +++++ input.addEventListener("keydown", (event) => { // if backspace or delete pressed if (event.keyCode === 8 || event.keyCode === 46) { // make tags selectable, so they can be removed const tags = input.querySelectorAll(".xml-tag"); tags.forEach(tag => tag.style["user-select"] = "auto"); // make tags not selectable after deletion setTimeout(function() { tags.forEach(tag => tag.style["user-select"] = "none"); }, 0); } }); body { font-family: sans-serif; } .input { color: green; box-shadow: 2px 2px 10px mediumaquamarine; padding: 8px; border-radius: 8px; margin-bottom: 24px; } .xml-tag { display: inline-flex; justify-content: center; align-items: center; width: 16px; height: 16px; margin-inline: 2px; user-select: none; border-radius: 50%; background: lime; font-size: 10px; white-space: pre; } .button { background: transparent; box-shadow: 3px 3px 5px limegreen; border: none; border-radius: 8px; padding: 8px; } .button:hover { transform: scale(1.1); cursor: pointer; } <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <div id="app"> <div spellcheck="false" contenteditable="true" class="input" id="snafu"> <span >Add at least 2 non-editable tags by clicking the button below. Then put the cursor at the end of line and press 'Backspace'</span > </div> <button id="button" class="button">Add me a tag, daddy!</button> </div> </body> </html>

无法在 Shadow DOM 中跨元素选择文本

我目前正在 a 中使用属性 contenteditable=true 的自定义元素。 然而，我遇到了 Shadow DOM 的问题，因为它似乎阻止我选择文本

如何使用 html 标签将文本包裹在多个节点中

我正在使用 contenteditable 并尝试创建一个简单的编辑器。不幸的是我不能使用 document.execCommand() 并且必须自己实现它。我在这里想做的是，如果用户

如何将大量文本发送到 contenteditable="true" 元素中？

更新： 经过更多研究后，我意识到我可以以更具体的方式提出这个问题：如何将大量文本发送到 contenteditable="true" 元素中？ 我正在工作...

防止内容中的行/段落中断可编辑

在 Firefox 中使用 contentEditable 时，有没有办法阻止用户通过按 Enter 或 Shift+Enter 插入段落或换行符？

为什么在 Chrome 中，当受约束时，带有截断的 contentedible div 会添加空格

所以我有这样的设置： ... 所以我有这样的设置： <div style="width:130px; background-color:lime"> <div contentEditable style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> Hi I am a long piece of text, well sort of long lalalaa </div> </div> 起初这似乎工作正常，但当我开始输入超出适合范围的文本后，它只是添加空格并将省略号向左移动。我不确定是什么原因导致此问题或如何使插入符号随文本向右移动。 将宽度更改为 100%， 去除溢出， 并设置空白换行 <div style="width: 100%; background-color:lime"> <div contentEditable style=" white-space: wrap;"> Hi I am a long piece of text, well sort of long lalalaa </div> </div> Chrome 似乎无法正确显示 contentEditable 功能和 text-overflow: ellipsis; 属性的组合。如果焦点位于省略号上，一种方法是删除省略号。 [contentEditable]:focus { text-overflow: initial !important; } <div style="width:130px; background-color:lime"> <div contentEditable onblur="this.scrollLeft = 0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> Hi I am a long piece of text, well sort of long lalalaa </div> </div>