使用JavaScript动态添加数据时，如何在可编辑内容的div文本末尾获得插入符号位置？

Question

注意：请在将其标记为重复之前，了解我正在使用Javascript中的keypress函数动态添加数据。

我正在尝试创建一个脚本，该脚本将数据动态添加到一个内容可编辑的div中，我可以使用以下代码来实现。

   var enterPressed = 0;
   window.onkeypress = function (e) {
       var keyCode = (e.keyCode || e.which);

       if (keyCode === 13) {
           if (enterPressed === 0) {
               e.preventDefault();
               var z = document.createElement('p'); // is a node
               z.innerHTML = "<br><p>R: ";
               document.getElementById("textbox").appendChild(z);
               enterPressed++;
           } else if (enterPressed === 1) {
               e.preventDefault();
               var z = document.createElement('p'); // is a node
               z.innerHTML = "<br><b>M: ";
               document.getElementById("textbox").appendChild(z);
               enterPressed++;
               enterPressed = 0;

           }
       }
   };

因此，当按回车键一次时，我得到M：；如果按回车键两次时，我得到R :，然后功能复位。

问题在于，每当我按Enter键时，插入符号位置仍会保留在文档的开头，而理想情况下，它应位于文档的末尾，以便我可以进一步键入内容。

Answer 1

您可以使用此功能将光标移到末尾。

function setEndOfContenteditable(contentEditableElement) {
  var range,selection;
  if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
  {
      range = document.createRange();//Create a range (a range is a like the selection but invisible)
      range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
      range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
      selection = window.getSelection();//get the selection object (allows you to change selection)
      selection.removeAllRanges();//remove any selections already made
      selection.addRange(range);//make the range you have just created the visible selection
  }
  else if(document.selection)//IE 8 and lower
  { 
      range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
      range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
      range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
      range.select();//Select the range (make it the visible selection
  }
}

这样添加新的孩子时，只需要使用此功能即可。

let child = document.getElementById("textbox").appendChild(z);
setEndOfContenteditable(child)

这是完整的工作代码

  function setEndOfContenteditable(contentEditableElement) { var range,selection; if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+ { range = document.createRange();//Create a range (a range is a like the selection but invisible) range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start selection = window.getSelection();//get the selection object (allows you to change selection) selection.removeAllRanges();//remove any selections already made selection.addRange(range);//make the range you have just created the visible selection } else if(document.selection)//IE 8 and lower { range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible) range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start range.select();//Select the range (make it the visible selection } } var enterPressed = 0; window.onkeypress = function (e) { var keyCode = (e.keyCode || e.which); if (keyCode === 13) { if (enterPressed === 0) { e.preventDefault(); var z = document.createElement('p'); // is a node z.innerHTML = "<br><p>R: "; let child = document.getElementById("textbox").appendChild(z); setEndOfContenteditable(child) enterPressed++; } else if (enterPressed === 1) { e.preventDefault(); var z = document.createElement('p'); // is a node z.innerHTML = "<br><b>M: "; let child = document.getElementById("textbox").appendChild(z); setEndOfContenteditable(child) enterPressed++; enterPressed = 0; } } }; var elem = document.getElementById("textbox"); setEndOfContenteditable(elem) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <div contenteditable="true" id="textbox">Please press enter</div> </body> </html> 

您可以查看此帖子以获取详细信息https://stackoverflow.com/a/3866442/5146848