DivMan

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

Recommended Posts

При клике на кнопку, в блок (с атрибутом 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;

 

Share this post


Link to post
Share on other sites
var formComment = document.querySelector('.write-comment');
formComment.innerHTML = '<b>' + userName + ',' + '</b>' + '&nbsp;';
formComment.appendChild(userNameHtml);

Можно так:

<p id='aaa' style="
padding: 10px; 
background: white; 
width: 50%;"                    
contenteditable="true" class="write-comment"></p> 
<button id="btn">Click me</button>
var userName = "Vasya Pupkin";

btn.onclick = function () {
  var formComment = document.querySelector(".write-comment");
  formComment.innerHTML = "<b>" + userName + "</b>" + ", ";
  formComment.focus();
  var sel = window.getSelection();
  var range = document.createRange();
  range.setStart(formComment, formComment.childNodes.length);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
};

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,433
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.