Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 02.07.2018, 20:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,277

редактирование текста в начале 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>

Последний раз редактировалось рони, 02.07.2018 в 20:53.
Ответить с цитированием
  #12 (permalink)  
Старый 03.07.2018, 17:37
Интересующийся
Отправить личное сообщение для Setraiser Посмотреть профиль Найти все сообщения от Setraiser
 
Регистрация: 01.07.2018
Сообщений: 14

У меня несколько иной случай, в вашем примере элементы списка уже есть, в моем же случае, в начале просто строка (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);
Ответить с цитированием
  #13 (permalink)  
Старый 03.07.2018, 17:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,277

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

Великоват конечно будет...
Последний кусок кода, который должен менять обратно текстовую часть, закомментирован, т.к. он вызовет ошибку....
<!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>

Последний раз редактировалось Setraiser, 03.07.2018 в 18:28.
Ответить с цитированием
  #15 (permalink)  
Старый 03.07.2018, 18:38
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

С использованием технологии 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>

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

Я пробовал использовать contentEditable, но оно действует на весь элемент списка. В моем случает мне нужно, чтобы оно работало только на li.firstChild, но оно так работать не хочет, у меня ошибка выскакивала, что li.firstChild.setAttribute("contenteditable",true) ; - не функция.
А нужно это все, т.к. в li у меня лежат теги. И при этом, оно выглядит так - http://prntscr.com/k23if1

Поэтому, замена firstChild элемента li на input выглядит лучше, правда пока без обратного скрипта...

http://prntscr.com/k23jq7

Последний раз редактировалось Setraiser, 03.07.2018 в 18:53.
Ответить с цитированием
  #17 (permalink)  
Старый 03.07.2018, 18:56
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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

Да, запускал. У вас создается элемент списка с именем и при этом ему дается атрибут "contenteditable",true, нажав "хватит", атрибут становится false и кнопки скрываются. Тут все понятно, но у вас же просто пустой li, имеется в виду, что там ничего нет, кроме присвоенного текста. Если делать также у меня, то вы видели, наверное, что у меня происходит взглянув на скриншот, оставленный выше.
Ответить с цитированием
  #19 (permalink)  
Старый 04.07.2018, 10:10
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от Setraiser
у вас же просто пустой li, имеется в виду, что там ничего нет, кроме присвоенного текста
Вместо этого текста можно ввести руками все, что вам угодно. Или вам что-то другое нужно? Не понимаю
Ответить с цитированием
  #20 (permalink)  
Старый 04.07.2018, 12:08
Интересующийся
Отправить личное сообщение для Setraiser Посмотреть профиль Найти все сообщения от Setraiser
 
Регистрация: 01.07.2018
Сообщений: 14

У меня просто в ли лежит ещё 2 тега, а не только текст, и надо, чтобы текстовая часть никак не затрагивала часть каких либо тегов.
Ответить с цитированием
Ответ



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

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


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