將插入符號移動到用環繞內容創建的跨度之外

Question

如果在任何 commonAncestorContainer parentNode（使用換行按鈕時創建的跨度）之外折疊，我正在嘗試移動選擇，到目前為止我沒有運氣。 這是代碼：

javascript

function wrapSelection(){
  var selection = window.getSelection();
  var span = document.createElement("span");
  span.style.fontWeight = "bold";
  
  if(selection.rangeCount){
    var range = selection.getRangeAt(0).cloneRange();
    
    if(!range.collapsed){
    range.surroundContents(span);
    }else{
      var newRange = document.createRange();
      newRange.setStartAfter(range.commonAncestorContainer.parentNode);
      selection.addRange(newRange);
    }
  } 
}

html

<html>
  <head>
  </head>
  <body>
    <input type="button" value="wrap" onclick="wrapSelection()" style="margin-bottom:10px;"/>
    <div id="my_textarea" style="height:50rem; width:50rem; border:1px solid #000;" contenteditable>
    </div>
  </body>
</html>

代碼筆： https ://codepen.io/justinhdevelopment/pen/PoNaXzj

如果選擇被折疊，這會將選擇放入 parentNode 容器中..有人可以幫助我將選擇放入 parentNode 容器之后嗎？ 最終結果將是在換行文本並再次單擊換行按鈕后，輸入的文本不會被換行，因為選擇在跨度之外/之后。 非常感謝您！

Answer 1

找到答案：

function placeCaretAfterNode(node){
  if(typeof window.getSelection != "undefined"){
    var range = document.createRange();
    range.setStartAfter(node);
    range.collapse(true);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  }
}


function styleSelection(event){
  var selection = window.getSelection();
  var span = document.createElement("span");
  span.style.fontWeight = "bold";
  if(selection.rangeCount){
    var range = selection.getRangeAt(0).cloneRange();
    if(!range.collapsed){
      range.surroundContents(span);
    }else{
      placeCaretAfterNode(range.commonAncestorContainer.parentNode);
  }
} 
}

在contenteditable div內的span元素之后設置光標

將插入符號移動到用環繞內容創建的跨度之外

問題描述

1 個解決方案

解決方案1
0 2020-09-15 01:21:36

將插入符號移動到用環繞內容創建的跨度之外

問題描述

1 個解決方案

解決方案1 0 2020-09-15 01:21:36

解決方案1
0 2020-09-15 01:21:36