редактирование текста в начале LI
Setraiser,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var input = document.createElement("input"),
title = ["Edit", "Ok"],
list = document.querySelector(".list"),
edit = 0,
li;
function replaceNode(elem) {
var first = elem.firstChild,
button = elem.querySelector("button");
edit ^= 1;
edit ? input.value = first.data : input.data = first.value;
input = elem.replaceChild(input, first);
button.textContent = title[edit];
edit ? elem.firstChild.focus() : li = void 0
}
list.addEventListener("click", function(event) {
var target = event.target,
parent = target.parentNode;
if (target.closest(".edit")) {
if (li && li != parent) replaceNode(li);
li = parent;
replaceNode(li)
}
if (target.closest(".del")) {
if (li && li == parent) replaceNode(li);
list.removeChild(parent)
}
})
});
</script>
</head>
<body>
<ul class="list">
<li>text 1<button class="edit">Edit</button><span class="del">X</span></li>
<li>text 2<button class="edit">Edit</button><span class="del">X</span></li>
<li>text 3<button class="edit">Edit</button><span class="del">X</span></li>
</ul>
</body>
</html>
|
У меня несколько иной случай, в вашем примере элементы списка уже есть, в моем же случае, в начале просто строка (input) для добавления элементов. И поэтому начинает ругаться на addEventListener.
http://prntscr.com/k22b5v Поэтому, у меня тоже возникают проблемы при моих попытках добавить событие на input. Когда добавляю событие на input (его же по логике пока нет, он null, он начинает ругаться). Пробовал делать например при keyup делать еще div.replacChild(span, div.firstChild) - поменять первый элемент (input), на span, ведь изначально первый элемент - простая строка, не тег. Поэтому я решил поменять на span. У меня сейчас проблема, как я писал выше, не добавляет событие на инпут, пишет, мол это не функцияhttp://prntscr.com/k22ijs Вот код на смену элемента списка на инпут, и обратно. Проблема в обратном. Просто, как мне кажется, у меня почти все правильно, но где то можно исправить пару строк на данный момент
list.addEventListener('click', function(event) {
if(event.target.tagName === "BUTTON") {
var div = event.target.parentNode;
var target = event ? event.target : window.event.srcElement;
var input = document.createElement('input');
input.className = 'data';
input.value = div.firstChild.data;
div.replaceChild(input, div.firstChild);
if (div == target) input.focus();
}
}, false);
var input = document.getElementsByClassName('.data');
input.addEventListener('keyup', function(event) {
if (event.keyCode === 13) {
var div = event.target.parentNode;
var span = document.createElement('span');
span.data = div.firstChild.value;
div.replaceChild(span, div.firstChild);
};
}, false);
|
Setraiser,
сделайте минимальный макет |
Великоват конечно будет...
Последний кусок кода, который должен менять обратно текстовую часть, закомментирован, т.к. он вызовет ошибку....
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset="utf-8" />
<title>ToDoList</title>
<style>
.data{
width: 70%;
height: 50%;
margin-top: -2%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
background: #eee;
font-size: 18px;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>ToDoList</h1>
</div>
<div class="string">
<input type="text" placeholder="Type your task..." id="toDoEl" >
</div>
<ul id="list">
</ul>
<button id="remove" class="remove" onclick="remove()" >
Clear list
</button>
</div>
</div>
<script>
var list = document.querySelector('ul');
list.addEventListener('click', function (ev) {
if(ev.target.tagName === "LI") {
ev.target.classList.toggle('checked');
} else if(ev.target.tagName === "SPAN") {
var div = ev.target.parentNode;
div.remove();
}
}, false);
var reg = /^([\.\?\!\-\_\s\d]{0,}[a-zа-я]{1,})$/gim
list.addEventListener('click', function(event) {
if(event.target.tagName === "BUTTON") {
var div = event.target.parentNode;
var target = event ? event.target : window.event.srcElement;
var input = document.createElement('input');
input.className = 'data';
input.value = div.firstChild.data;
div.replaceChild(input, div.firstChild);
if (div == target) input.focus();
}
}, false);
function newElement() {
var li = document.createElement('li');
var inputValue = document.getElementById('toDoEl').value;
var t = document.createTextNode(inputValue);
li.appendChild(t); t
if(reg.test(inputValue) === false) {
alert("Type your task!");
} else {
document.getElementById('list').appendChild(li);
}
document.getElementById('toDoEl').value = "";
var span = document.createElement('span');
var txt = document.createTextNode("X");
span.className = "close";
span.appendChild(txt);
var button = document.createElement('button');
var name = document.createTextNode('Edit');
button.className = 'edit';
button.appendChild(name);
li.appendChild(button);
;
li.appendChild(span);
}
var text = document.getElementById("toDoEl");
text.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) newElement();
});
var remove = function(){
var liel = document.getElementById('list');
if (document.querySelector('li') === null){
alert('The List is empty');
} else {
while (liel.firstChild) {
liel.removeChild(liel.firstChild);
}
}
}
/*var input = document.querySelectorAll('.data');
input.addEventListener('keyup', function(event) {
if (event.keyCode === 13) {
var div = event.target.parentNode;
var span = document.createElement('span');
span.data = div.firstChild.value;
div.replaceChild(span, div.firstChild);
};
}, false);*/
</script>
</body>
</html>
|
С использованием технологии j0hnik
Добавляете, меняете...
<ul class="list">
</ul>
<button id = "add">Добавить</button >
<button id = "stop">Хватит</button >
<script>
var list = document.querySelector('.list');
document.querySelector('#add').onclick = function() {
document.querySelectorAll("li").forEach(el=>el.contentEditable = false);
var el = document.createElement('li');
el.innerHTML = "Type your task...";
el.setAttribute("contenteditable",true);
list.appendChild(el);
}
document.querySelector('#stop').onclick = function() {
list.querySelectorAll("li").forEach(el=>el.contentEditable = false);
this.style.display = "none";
document.querySelector('#add').style.display = "none";
list.querySelectorAll('li').forEach(el=>el.onclick = function(){
alert(this.innerHTML)
});
}
</script>
|
Я пробовал использовать contentEditable, но оно действует на весь элемент списка. В моем случает мне нужно, чтобы оно работало только на li.firstChild, но оно так работать не хочет, у меня ошибка выскакивала, что li.firstChild.setAttribute("contenteditable",true) ; - не функция.
А нужно это все, т.к. в li у меня лежат теги. И при этом, оно выглядит так - http://prntscr.com/k23if1 Поэтому, замена firstChild элемента li на input выглядит лучше, правда пока без обратного скрипта... http://prntscr.com/k23jq7 |
Setraiser,
Вы запускали мой пример (Кнопка Посмотреть) ? |
Да, запускал. У вас создается элемент списка с именем и при этом ему дается атрибут "contenteditable",true, нажав "хватит", атрибут становится false и кнопки скрываются. Тут все понятно, но у вас же просто пустой li, имеется в виду, что там ничего нет, кроме присвоенного текста. Если делать также у меня, то вы видели, наверное, что у меня происходит взглянув на скриншот, оставленный выше.
|
Цитата:
|
У меня просто в ли лежит ещё 2 тега, а не только текст, и надо, чтобы текстовая часть никак не затрагивала часть каких либо тегов.
|
| Часовой пояс GMT +3, время: 21:43. |