Javascript.RU

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

Кнопка переименования элемента списка.
Всем Добрый День.

Я новичок в изучении 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);
Ответить с цитированием
  #2 (permalink)  
Старый 01.07.2018, 13:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Setraiser,
https://javascript.ru/forum/misc/455...tml#post302151
Ответить с цитированием
  #3 (permalink)  
Старый 01.07.2018, 14:47
Интересующийся
Отправить личное сообщение для Setraiser Посмотреть профиль Найти все сообщения от Setraiser
 
Регистрация: 01.07.2018
Сообщений: 14

А есть что нибудь именно на нативном JS? JQ пока не сильно пользовался, хочу пока реализовать пока без него.

Но исходя из предложенного вами, если я правильно понял, то там имеется ввиду запускать событие преобразования ячейки таблицы (в принципе не важно что именно, можно и мой элемент списка) в input, где можно будет изменять текст через его value (менять значение).

Но у меня еще возник вопрос. В таком случае в value не будут находится кнопки?

p.s. прошу понять и простить, если где то могу тупить
Ответить с цитированием
  #4 (permalink)  
Старый 01.07.2018, 14:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Setraiser
В таком случае в value не будут находится кнопки?
не будут
Ответить с цитированием
  #5 (permalink)  
Старый 01.07.2018, 14:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Setraiser
А есть что нибудь именно на нативном JS?
https://javascript.ru/forum/dom-wind...tml#post302977
Ответить с цитированием
  #6 (permalink)  
Старый 01.07.2018, 17:57
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<ul contenteditable="true">
	<li>задача 1</li>
	<li>задача 2</li>
	<li>задача 3</li>
</ul>
Ответить с цитированием
  #7 (permalink)  
Старый 02.07.2018, 04:34
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<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>
Ответить с цитированием
  #8 (permalink)  
Старый 02.07.2018, 18:00
Интересующийся
Отправить личное сообщение для Setraiser Посмотреть профиль Найти все сообщения от Setraiser
 
Регистрация: 01.07.2018
Сообщений: 14

Спасибо) Получилось) Но хотелось бы ещё узнать, когда нужно уже подтвердить изменение, т.е. вернуть обратно в элемент списка ли (input превратить в li обратно), то это можно сделать обратный replaceChild? Или как то можно использовать toggle, например нажав на кнопку Edit, включается редактирование элемента списка в виде input, и второй раз нажать, оно возвращается обратно.
Ответить с цитированием
  #9 (permalink)  
Старый 02.07.2018, 18:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Setraiser
например нажав на кнопку Edit, включается редактирование элемента списка в виде input, и второй раз нажать, оно возвращается обратно.
и в чём проблема?
Ответить с цитированием
  #10 (permalink)  
Старый 02.07.2018, 19:44
Интересующийся
Отправить личное сообщение для Setraiser Посмотреть профиль Найти все сообщения от Setraiser
 
Регистрация: 01.07.2018
Сообщений: 14

Я пробовал делать подтверждение изменения текста в строке через событие 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.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Считывание значения текущего выбранного элемента списка в переменную apomin Элементы интерфейса 1 15.10.2015 19:47
autocomplete, обработка элемента списка при фокусе culver jQuery 12 29.06.2014 14:52
Событие при выборе элемента из выпадающего списка в input type="email" Алексей Горохов Events/DOM/Window 4 27.12.2013 10:38
при выборе элемента из списка появляется еще один список maratmm Элементы интерфейса 0 07.08.2012 17:06
Случайный показ элемента li из составного списка Александр345 jQuery 3 14.04.2011 20:13