Кнопка переименования элемента списка.
Всем Добрый День.
Я новичок в изучении JavaScript. Работаю над простым модулем, если его можно назвать таковым, простой ToDoList (Список дел). Он сам работает прекрасно, но я хочу сделать кнопку переименования элемента списка. Но проблема заключается в том, что в элементе списка (li), помимо его названия, лежат ещё две кнопки: ода кнопка для переименования, другая для удаления (<li>text<button>Edit</button><span>X</span></li>). И если например делать переименование элемента через prompt, то оно, конечно, переименует его, но при этом сотрет ещё и теги внутри (кнопки). Я решил попробовать сделать переименование при помощи регулярных выражений и использовать replace (string.replace(/[^<>/]/, prompt) - это просто наглядный пример, как примерно я думал делать переименование. Здесь проблема заключается в том, что при нажатии на кнопку prompt для переименования вылетает, но при нажатии OK, он ничего не переименовывает, при это, не выдает никакую ошибку.
list.addEventListener('click', function(ev) {
if(ev.target.tagName === "BUTTON") {
var li = document.querySelector('li');
var regRename = /[^<>/]/ig;
//var a = prompt('Переименование элемента');
li.textContent.replace(regRename, prompt());
if(reg.test(li.textContent) === false) return false;
}
}, false);
|
|
А есть что нибудь именно на нативном JS? JQ пока не сильно пользовался, хочу пока реализовать пока без него.
Но исходя из предложенного вами, если я правильно понял, то там имеется ввиду запускать событие преобразования ячейки таблицы (в принципе не важно что именно, можно и мой элемент списка) в input, где можно будет изменять текст через его value (менять значение). Но у меня еще возник вопрос. В таком случае в value не будут находится кнопки? p.s. прошу понять и простить, если где то могу тупить |
Цитата:
|
Цитата:
|
<ul contenteditable="true"> <li>задача 1</li> <li>задача 2</li> <li>задача 3</li> </ul> |
<li>Пункт1</li>
<li>Пункт2</li>
<li>Пункт3</li>
<input type="checkbox"> Редактирование
<script>
document.querySelector("input").onchange = e => document.querySelectorAll("li").forEach(el=>el.contentEditable = e.target.checked ? true : false);
</script>
|
Спасибо) Получилось) Но хотелось бы ещё узнать, когда нужно уже подтвердить изменение, т.е. вернуть обратно в элемент списка ли (input превратить в li обратно), то это можно сделать обратный replaceChild? Или как то можно использовать toggle, например нажав на кнопку Edit, включается редактирование элемента списка в виде input, и второй раз нажать, оно возвращается обратно.
|
Цитата:
|
Я пробовал делать подтверждение изменения текста в строке через событие keyup. Но у меня возникала ошибка, когда я делал replaceChild.
var input = document.createElement('input');
input.className = 'data';
input.value = div.firstChild.data;
div.replaceChild(input, div.firstChild);
// div - родительский элемент кнопки, где была нажата кнопка, т.е. <li>, где меняется текст. Потом пробовал сделать при нажатии enter наоборот. div.firstChild.data = input.value; input.replaceChild(div, input.firstChild); Т.е. назначается значение li с input.value, потом делаем replaceChild, меняем input на li (Родительский). По сути вроде так, но он ругается на то, что input не узел. У меня тут пробел в том, что я не знаю, как вернуть обратно, ведь по сути, то же самое, но оно выходит, воспринимает это по другому. Как вернуть input обратно на li? И делать это, например, через тот самый toggle - нажал кнопку и div.firstChild.data превращается в input.value, другой раз нажал, и input.value превращается в div.firstChild.data. |
| Часовой пояс GMT +3, время: 05:00. |