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

Question

[Антон]

Для примера набросал код:


У меня есть два блока с текстом(первый имитирует папку, второй файл). При клике правой кнопкой мыши на блок у него становится возможным редактировать свое название(с помощью contenteditable). В коде уже реализовано отслеживание события - был клик по файлу или папке.
Как мне при клике по конкретному блоку, ставить курсор в конец его названия если это папка и перед точкой, если это файл?
Заранее благодарен за любую помощь.

Comments

[wickinats]

Если мне не изменяет память, то js не имеет доступа к управлению курсором мыши пользователя. Здесь опять же играет немаловажную роль сама концепция безопасности веб-приложений для их пользователей.

Answer 1

[hzzzzl]

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);
}

Comments

[Антон]

Спасибо, то что нужно!

[hzzzzl]

Антон, перестанет работать, если кто-то умный нажмет энтер при вводе текста (потому что добавится новый childNode), но это можно через js тоже отлавливать

[Антон]

hzzzzl, тут я думаю не критично)
А вообще попробую сейчас реализовать отлавливание Enter, и просто делать тоже самое что и при клике вне области, отключать редактирование.