Перенос фокуса в новые contenteditable поля

254

31 марта 2018, 15:33

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

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

Answer 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();

Answer 2

Есть метод 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>