Как вставить курсор в нужное место?

114

02 октября 2019, 06:20

При клике на кнопку, в блок (с атрибутом contenteditable) помещается имя и оборачивается в элемент b и надо потом печатать после имени, если кликнуть потом в этот блок, то курсор не выходит за пределы элемента b и получается весь напечатанный текст будет тоже жирным, как вывести курсор за этот элемент?

Почему то selectionStart не работает.

<p style="
padding: 10px; 
background: white; 
width: 50%;" 
contenteditable="true" class="write-comment"></p>

var formComment = document.querySelector('.write-comment');
var userNameHtml = document.createElement('b'); 
userNameHtml.innerHTML = userName + ',&nbsp;';
formComment.appendChild(userNameHtml);
formComment.focus();
formComment.selectionStart = formComment.innerHTML.length;

Answer 1

Как вариант остальной текст вынести в отдельный элемент:

var userName="Vovan"; 
var formComment = document.querySelector('.write-comment'); 
var userNameHtml = document.createElement('b'); 
userNameHtml.innerHTML = userName + ','; 
var otherText = document.createElement('span'); 
otherText.innerHTML="&nbsp;"; 
 
formComment.appendChild(userNameHtml); 
formComment.appendChild(otherText); 
formComment.childNodes[1].selectionStart = 0; 
formComment.childNodes[1].focus();

<p style=" 
padding: 10px;  
background: white;  
width: 50%;"  
 
contenteditable="true" class="write-comment"></p>

Answer 2

В качестве альтернативы:

function go() { 
  var formComment = document.querySelector('.write-comment'); 
  var userNameHtml = document.createElement('b'); 
  var emptyNode = document.createTextNode(' '); 
 
  userNameHtml.contentEditable = false; 
  userNameHtml.innerHTML = "NAME" + ',&nbsp;'; 
 
  formComment.appendChild(userNameHtml); 
  formComment.appendChild(emptyNode); 
 
  var range = document.createRange(); 
  var sel = window.getSelection(); 
  range.setStartAfter(emptyNode); 
  range.collapse(false); 
  sel.removeAllRanges(); 
  sel.addRange(range); 
}

<p style=" 
	padding: 10px;  
	background: white;  
	width: 50%;border:1px solid black;" contenteditable="true" id="write-comment" class="write-comment"></p> 
<button onclick="go()">GO</button>

Answer 3

let button =  document.querySelector('#button').addEventListener('click', 
function(){ 
  let formComment = document.querySelector('.write-comment'); 
  let userName = 'Vasia' 
  let range  =  document.createRange(); 
  formComment.focus() 
  let selection =  window.getSelection()   
  range.selectNodeContents(formComment); 
  let userNameHtml = document.createElement('b'); 
  let space =  document.createTextNode(' ') 
  formComment.insertBefore(space,userNameHtml.nextChild) 
  userNameHtml.textContent = userName 
  range.insertNode(userNameHtml) 
  let newRange  =  document.createRange(); 
  range.selectNodeContents(formComment) 
  range.collapse() 
  selection.removeAllRanges() 
  selection.addRange(range) 
  selection.collapseToEnd(); 
})

.write-comment{ 
 
 white-space: pre; 
 
}

<p style=" 
padding: 10px;  
background: white;  
width: 50%; "  
 
contenteditable="true" class="write-comment"></p> 
 
 
<button id='button'>click</button>