JS插入两个连续的文本节点在一个跨度不当时，不在调试模式

JS insert two successive text Node in a span misbehave when not on debugging mode

本文关键字：模式 当时 一个 调试 节点 两个 插入 连续 JS 文本      更新时间：2023-09-26

我正在开发一个字符工具栏(一个div与按钮)。当用户单击一个字符时，应该将其插入到当前光标位置的内容可编辑范围中。对于第一个插入的字符，它工作得很好，但是当试图直接插入第二个字符时，它被插入到旧的插入符号位置。当我单击span(或从键盘写入，甚至连接调试器或当我设置alert()时)，然后插入第二个字符。

我试过setTimeout的功能，但它没有帮助。

我的代码如下: 
function Toolbar_Click(event) {
  $('#mySpan').focus();
  M_InsertTextATCaret(character);
}

function M_InsertTextATCaret(text) {
  var retVal = true;
  try {
    var range = M_GetRange();
    if (range) {
      var textNode = M_GetTextNode(text);
      range.insertNode(textNode);
    }
  } catch (e) {
    retVal = false
  };
  return retVal;
}
function M_GetTextNode(text) {
  var retVal = M_CreateTextNode(text, "p");
  return retVal;
}
/// <summary>
/// Create Text Node from copied text
/// </summary>
/// <param name="text">the  text</param>
/// <param name="HtmlTagName">the  parent Node tag Name</param>
function M_CreateTextNode(text, HtmlTagName) {
  var retVal = document.createDocumentFragment();
  var p = document.createElement(HtmlTagName);
  $(p).html(text);
  var child;
  while ((child = p.firstChild)) {
    retVal.appendChild(child);
  }
  return retVal;
}
/// <summary>
/// return selection range
/// </summary>
function M_GetRange() {
  var retVal;
  if (w3) {
    retVal = window.getSelection().getRangeAt(0);
  } else if (ie) {
    retVal = document.selection.createRange();
  }
  return retVal;
}

有人能帮我吗?

下面的方法解决了问题。

range.collapse(false);
相关文章：