0

Как сделать так чтобы при создании нового элемента в него переносиля фокус?

https://jsfiddle.net/brachkoff/zfh8wmzr/3/

HTML:

<ul id="list">
  <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Текст задания</span></li>
  <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Еще текста</span></li>
  <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Какой-то текст</span></li>
</ul>
<div id="interface">
  <button id="add">Add Task</button>
</div>

JS:

$('#add').click(function() {
  $('#list').append('<li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text"></span></li>')
})

3 ответа 3

3

Есть метод focus(), который предназначен для установки фокуса.

Пример на jsfiddle.

$('#add').click(function() {
  var $el = $('<li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text"></span></li>'); // создаем элемент
  $('#list').append($el); // Добавляем его в список
  $el.find('.task__text').focus(); // Находим редактируемый элемент и устанавливаем фокус
})
#list {
  list-style: none;
  padding-left: 40px;
  padding-right: 40px;
}

.task__text {
  margin-left: 0.5rem;
  outline: none;
}

.task__text br {
  display: none;
}

#interface {
  padding-left: 40px;
  padding-right: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Текст задания</span></li>
  <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Еще текста</span></li>
  <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Какой-то текст</span></li>
</ul>
<div id="interface">
  <button id="add">Add Task</button>
</div>

0

В добавок к методу focus, можно изменить построение элементов, чтобы не искать элемент, который мы сами и создаем.

Для этого можно воспользоваться методом appendTo (немного о разнице между append и appendTo)

Особенность метода appendTo в том, что он возвращает элемент, который добавлялся, следовательно к его результату можно применить и метод focus.

Пример реализации:

$('#add').click(function() {
  $('<span contenteditable="true" class="task__text"></span>').appendTo(
    $('<li class="task"><input type="checkbox" class="task__checkbox"></li>').appendTo('#list')
  ).focus();
})
#list {
  list-style: none;
  padding-left: 40px;
  padding-right: 40px;
}

.task__text {
  margin-left: 0.5rem;
  outline: none;
}

.task__text br {
  display: none;
}

#interface {
  padding-left: 40px;
  padding-right: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Текст задания</span></li>
  <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Еще текста</span></li>
  <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Какой-то текст</span></li>
</ul>
<div id="interface">
  <button id="add">Add Task</button>
</div>

-1
$('#list')
    .append('<li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text"></span></li>')
    .find('li:last-child [contenteditable]')
    .focus();
9
  • можете подробнее разъяснить что вы делали с .find?
    – user272575
    29 мар 2018 в 17:58
  • @brachkoff, нашел необходимый элемент, на который вы планируете установить фокус. Собственно, имя метода - find - говорит само за себя - "найти" ))
    – Deonis
    29 мар 2018 в 18:00
  • @brachkoff, метод find() выполняет поиск дочерних элементов. В данном случае, если я не ошибаюсь, поиск выполняется от добавленного элемента li (так как append возвращает объект jQuery, судя по документации). А параметром метода использован селектор, выбирающий элементы с атрибутом contenteditable, дочерние по отношению к последнему потомку li. Если мои рассуждения верны, то данный код не только малоэффективен, но и содержит ошибку... хотя, он может и работать.
    – yar85
    29 мар 2018 в 18:35
  • @yar85, если коротко, то ваши рассуждения не верны. Впрочем, об эффективности библиотеки в целом, действительно говорить сложно.
    – Deonis
    29 мар 2018 в 18:57
  • @Deonis, об эффективности библиотеки в целом - речи и не было (потому что к данному вопросу это не относится).
    – yar85
    29 мар 2018 в 19:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки