How to put the cursor in a specific place?

Question

JavaScript

For example, I sketched out the code:


I have two blocks with text (the first imitates a folder, the second a file). When you right-click on a block, it becomes possible to edit its name (using contenteditable). The code has already implemented event tracking - there was a click on a file or folder.
How can I, when clicking on a specific block, put the cursor at the end of its name if it is a folder and before the dot if it is a file?
Thanks in advance for any help.

Answer 1

https://stackoverflow.com/a/6249440

function onContextMenu(e) {
  e.preventDefault();
  elementOnClick = e.target;

  if(elementOnClick.tagName.toLowerCase() === 'div') {
    if(elementOnClick.classList.contains('folder')) {
      elementOnClick.setAttribute('contenteditable', 'true');
      
    var range = document.createRange();
    var sel = window.getSelection();
    const pos =   elementOnClick.childNodes[0].textContent.length
    range.setStart(elementOnClick.childNodes[0], pos);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
      
      elementOnClick.focus();
      console.log('Elem FOLDER');
      
      
    } else if(elementOnClick.classList.contains('file')) {
      elementOnClick.setAttribute('contenteditable', 'true');
      
    var range = document.createRange();
    var sel = window.getSelection();
    const pos =   elementOnClick.childNodes[0].textContent.lastIndexOf('.')
    range.setStart(elementOnClick.childNodes[0], pos);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
      
      elementOnClick.focus();
      console.log('Elem FILE');
      
      
    }
  } else {
    console.log('EMPTY');
  }
  document.addEventListener('click', onMouseClick, false);
}