Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.10.2017, 17:56
Новичок на форуме
Отправить личное сообщение для health_dim Посмотреть профиль Найти все сообщения от health_dim
 
Регистрация: 09.10.2017
Сообщений: 2

Установка положения курсора в контейнере div
Добрый день!

Новичок. Изучаю Javascript.

Есть такой скрипт устанавливающий положение курсора в input Элементах (<input type="text">, <textarea>...).

<!DOCTYPE html>

<html>
  <head>
    <title>Range</title>
  </head>
  <body>
    <input id="in" type="text" value = "1111111111111111111">
  </body>
</html>
<script>
  function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}
 
function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

setCaretToPos(document.getElementById("in"), 4);

</script>


Можно ли сделать так чтобы код работал c <div contenteditable></div>

Не срабатывает следующая строчка кода:

input.setSelectionRange(selectionStart, selectionEnd);

<!DOCTYPE html>

<html>
  <head>
    <title>Range</title>
  </head>
  <body>
    <div id="in" contenteditable>111111111111111111111</div>
  </body>
</html>
<script>
  function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}
 
function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

setCaretToPos(document.getElementById("in"), 4);

</script>
Ответить с цитированием
  #2 (permalink)  
Старый 09.10.2017, 18:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

health_dim,
<!DOCTYPE html>

<html>
  <head>
    <title>Range</title>
  </head>
  <body>
    <div id="in" contenteditable>111111111111111111111</div>

<script>
  function setCaretToPos(elem, pos) {
var range = document.createRange();
var sel = window.getSelection();
range.setStart(elem.childNodes[0], pos);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}

setCaretToPos(document.getElementById("in"), 4);

</script>
 </body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 09.10.2017, 22:45
Новичок на форуме
Отправить личное сообщение для health_dim Посмотреть профиль Найти все сообщения от health_dim
 
Регистрация: 09.10.2017
Сообщений: 2

Огромное спасибо!

Пытался разобраться по https://learn.javascript.ru/range-textrange-selection

Верны ли комментарии:

range.collapse(true);  // граничные точки в одном месте кода
sel.removeAllRanges(); //строку можно опустить т.к. в общем-то выделения кода не было
sel.addRange(range); //установка курсора
Ответить с цитированием
  #4 (permalink)  
Старый 10.10.2017, 00:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от health_dim
Верны ли комментарии:
да
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Калькулятор с вариантом значений. dzho Общие вопросы Javascript 45 06.08.2017 03:54
Скрыть div блок по событию перемещение курсора или клика ivnjavascript Events/DOM/Window 9 17.08.2015 17:07
Прокрутка div в независимости от положения курсора Lexussab jQuery 4 17.02.2014 22:55
Установка курсора в div с contentEditable=true fr0st1k Элементы интерфейса 7 11.01.2012 16:06
установка позиции курсора или выделения в iframe mister_maxim Events/DOM/Window 5 18.04.2009 10:43