|
Сообщение от webgraph
|
|
Как сфокусировать на самом конце текста?)
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
[contenteditable] {
height: 50px;
width: 400px;
border: 1px solid #000000;
}
[contenteditable]:focus {
outline: none;
border-color: #FF0000;
}
</style>
<title></title>
</head>
<body>
<!-- Весь список check-листов -->
<section id="lists">
<!-- Первая группа check-листов -->
<div class="group">
<div class="list list-container">
<input type="checkbox">
<div class="check-text" contenteditable=""></div>
</div>
<div class="list list-container">
<input type="checkbox">
<div class="check-text" contenteditable=""></div>
</div>
</div>
<!-- Вторая группа check-листов -->
<div class="group">
<div class="list list-container">
<input type="checkbox">
<div class="check-text" contenteditable=""></div>
</div>
<div class="list list-container">
<input type="checkbox">
<div class="check-text" contenteditable=""></div>
</div>
</div>
<!-- ... Следующая группа check-листов и т.д. -->
</section>
<script>
//функция, которая создает новый див
function enterCheck(list) {
let html = `<div class="list list-container">
<input type="checkbox">
<div class="check-text" contenteditable=""><\/div>
<\/div>`
list.insertAdjacentHTML('afterend', html);
list.nextElementSibling.querySelector('.check-text').focus();
}
//собираем массив всех group'ов
let checkTexts = document.querySelectorAll('.group');
//перебираем этот массив
checkTexts.forEach(function(e) {
//когда в нём нажимаются клавиши
e.addEventListener('keydown', function(event) {
let target = event.target;
//когда нажата Enter
if (event.key === 'Enter' && (target = target.closest('.check-text'))) {
//отменяем стандартное поведение(перенос строки)
event.preventDefault();
//если текущий блок не пустой, то добавляем новый сразу после него
if (target.innerText !== '') {
let list = target.closest('.list')
enterCheck(list);
}
};
if (event.key === 'Delete' && (target = target.closest('.check-text'))) {
//отменяем стандартное поведение(перенос строки)
event.preventDefault();
//если текущий блок пустой и есть блок выше, то удаляем его
if (target.innerText === '') {
let list = target.closest('.list')
let prev = list.previousElementSibling;
if (prev) {
e.removeChild(list);
let div = prev.querySelector('.check-text'),
pos = div.innerHTML.length,
range = document.createRange();
range.setStart(div.childNodes[0], pos);
range.collapse(true);
let sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
};
});
});
</script>
</body>
</html>
