怎么使 contenteditable="true"标签触发focus()后的光标出现在内容末尾？

Posted 2023-04-03

如图 像贴吧的这种回复框的focus效果 光标出现在末尾要怎么实现，求大神指教
下图博主已实现类似功能~

参考技术A 使用下面这个函数，绝对好使。

function inserthtmlAtCaret(html)
var sel, range;
if (window.getSelection)
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount)
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while((node = el.firstChild))
lastNode=frag.appendChild(node);

range.insertNode(frag);
// Preserve the selection
if (lastNode)
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);


else if (document.selection && document.selection.type != "Control")
// IE < 9
document.selection.createRange().pasteHTML(html);

追问

谢谢，但是我要的效果是点右上角的“我也说一句”然后光标聚焦到内容，定位到末尾；如果我在内容区点击，不需要到末尾

在 Chrome 和 Firefox 中调整图像大小时 contenteditable="true" 属性不适用于图像标签的解决方案

【中文标题】在 Chrome 和 Firefox 中调整图像大小时 contenteditable="true" 属性不适用于图像标签的解决方案

【英文标题】：Solution for contenteditable="true" property is not working for image tag when resize image in Chrome and Firefox

【发布时间】：2021-06-06 23:45:00

【问题描述】：

我想调整 div 中 img 标签内的图像大小。我正在为 div 使用 contenteditable="true" 属性。我正在编辑内容，但我没有选择图像并在 chrome 和 firefox 中调整图像大小

我的代码很简单

div contenteditable="true" img src="img.png" div

此代码在 IE 浏览器中运行，我正在选择图像并调整图像大小，但在 chrome 和 firefox 中，它对我不起作用。

请给出一些解决方案。谢谢

【问题讨论】：

你需要使用 CSS。对于 div，设置溢出：初始；和调整大小：两者；

使用上面的 CSS 但它不会工作

【参考方案1】：

尝试将以下 CSS 添加到您的 div 中。 （如果这不起作用，请尝试将其应用于图像）

div
overflow: auto;
resize: both;

在以下小提琴中检查 'img' div 的 CSS：https://jsfiddle.net/x4ntjsv5/

【讨论】：

你能提供一个可重现的例子吗？就像在 JSFiddle 上一样