我有一个 contenteditable div，我需要在插入符号位置插入文本，
这可以通过以下方式在 IE 中轻松完成 document.selection.createRange().text = "banana"
在 Firefox/Chrome 中是否有类似的实现方式？
（我知道这里有一个解决方案，但它不能用于 contenteditable div，而且看起来很笨拙）
谢谢！
在内容可编辑的 div 中的光标处插入文本
IT技术
javascript
contenteditable
2021-01-31 05:43:52
5个回答
以下函数将在插入符号位置插入文本并删除现有选择。它适用于所有主流桌面浏览器：
function insertTextAtCaret(text) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode( document.createTextNode(text) );
}
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().text = text;
}
}
更新
根据评论，这里有一些用于保存和恢复选择的代码。在显示上下文菜单之前，您应该将 的返回值存储saveSelection在一个变量中，然后将该变量传递restoreSelection给in 以在隐藏上下文菜单后和插入文本之前恢复选择。
function saveSelection() {
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if (window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}
- 使用 获取选择对象
window.getSelection()。 - 使用
Selection.getRangeAt(0).insertNode()添加textnode。 如有必要，使用 将光标位置移动到添加的文本后面
Selection.modify()。（未标准化，但 Firefox、Chrome 和 Safari 支持此功能）function insertTextAtCursor(text) { let selection = window.getSelection(); let range = selection.getRangeAt(0); range.deleteContents(); let node = document.createTextNode(text); range.insertNode(node); for(let position = 0; position != text.length; position++) { selection.modify("move", "right", "character"); }; }
我已经使用下一个代码在聊天消息中插入图标
<div class="chat-msg-text" id="chat_message_text" contenteditable="true"></div>
<script>
var lastCaretPos = 0;
var parentNode;
var range;
var selection;
$(function(){
$('#chat_message_text').focus();
$('#chat_message_text').on('keyup mouseup',function (e){
selection = window.getSelection();
range = selection.getRangeAt(0);
parentNode = range.commonAncestorContainer.parentNode;
});
})
function insertTextAtCursor(text) {
if($(parentNode).parents().is('#chat_message_text') || $(parentNode).is('#chat_message_text') )
{
var span = document.createElement('span');
span.innerHTML=text;
range.deleteContents();
range.insertNode(span);
//cursor at the last with this
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
else
{
msg_text = $("#chat_message_text").html()
$("#chat_message_text").html(text+msg_text).focus()
}
}
</script>
只是使用 jquery 的一种更简单的方法：
复制div的全部内容
var oldhtml=$('#elementID').html();
var tobejoined='<span>hii</span>';
//element with new html would be
$('#elementID').html(oldhtml+tobejoined);
简单的！