Блог

Главная - Вопросы по программированию - Как обрабатывать поля ключевых слов с промежутками в JavaScript / HTML / CSS

Как обрабатывать поля ключевых слов с промежутками в JavaScript / HTML / CSS

#javascript #html #keyword #eventhandler

#javascript #HTML #ключевое слово #обработчик событий

Вопрос:

Я пытаюсь создать переменное количество полей ключевых слов (количество полей ключевых слов определяется php). Для лучшего понимания я создал три жестко закодированных поля ключевых слов html. Конечным результатом должно быть несколько полей ключевых слов, которые могут обрабатывать несколько ключевых слов и показывать их после каждого ввода в отдельном внутреннем поле. Если я нажму на КНОПКУ, все ключевые слова должны быть предупреждены.

Моя текущая попытка почти работает. Вы можете вводить ключевые слова, сохранять их, нажимая enter. Но внутренние поля ключевых слов отображаются только после повторного нажатия на поле ключевых слов.

Я был бы очень признателен, если бы кто-нибудь мог помочь мне с этой проблемой. 🙂

 let tags = [];

let tagContainer = document.querySelectorAll('.tag-container');
tagContainer.forEach(function(foo) {
  foo.addEventListener('click', (e) => {
    //console.log(e.target.tagName);

    //if (e.target.tagName === 'I') {
    var tagLabel = e.target.getAttribute('data-item');
    var index = tags.indexOf(tagLabel);
    tags = [...tags.slice(0, index), ...tags.slice(index   1)];
    foo.querySelectorAll('.tag').forEach(tag => {
      tag.parentElement.removeChild(tag);
    });
    tags.slice().reverse().forEach(tag => {
      var div = document.createElement('div');
      div.setAttribute('class', 'tag');
      var span = document.createElement('span');
      span.innerHTML = tag;
      var closeIcon = document.createElement('i');
      closeIcon.innerHTML = 'close';
      closeIcon.setAttribute('class', 'material-icons');
      closeIcon.setAttribute('data-item', tag);
      div.appendChild(span);
      div.appendChild(closeIcon);
      foo.prepend(div);
    });
    //}
  })
});

let input = document.querySelectorAll('.tag-container input');
input.forEach(function(bar) {
  bar.addEventListener('keyup', (e) => {
    if (e.key === 'Enter') {
      e.target.value.split(',').forEach(tag => {
        tags.push(tag);
      });
      bar.querySelectorAll('.tag').forEach(tag => {
        tag.parentElement.removeChild(tag);
      });
      tags.slice().reverse().forEach(tag => {
        var div = document.createElement('div');
        div.setAttribute('class', 'tag');
        var span = document.createElement('span');
        span.innerHTML = tag;
        var closeIcon = document.createElement('i');
        closeIcon.innerHTML = 'close';
        closeIcon.setAttribute('class', 'material-icons');
        closeIcon.setAttribute('data-item', tag);
        div.appendChild(span);
        div.appendChild(closeIcon);
        bar.prepend(div);
      });
      bar.value = '';
    }
    bar.focus();
  })

});

function clicked() {
  alert(JSON.stringify(tags));
}  
 .container {
  width: 20%;
  margin: 40px;
  align-self: center;
}

.tag-container {
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  display: flex;
}

.tag-container .tag {
  padding: 5px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  margin: 5px;
  border-radius: 3px;
  background: #f2f2f2;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;
  cursor: defau<
}

.tag i {
  font-size: 16px;
  margin-left: 5px;
}

.tag-container input {
  flex: 1;
  font-size: 16px;
  padding: 5px;
  outline: none;
  border: 0;
}  
 <!DOCTYPE html>
<html lang="en" dir="ltr">
<table>
  <td>
    <div class="tag-container">
      <div id="span_tag">
        <span id="span_key" value=""></span>
        <i class="material-icons">close</i>
      </div>
      <input id="input_search" value="" />
    </div>
    </tr>
  </td>
  <td><button type="button" id="bt" onclick="clicked()">Button</button>
    <td/>
</table>
<table>
  <td>
    <div class="tag-container">
      <div id="span_tag">
        <span id="span_key" value=""></span>
        <i class="material-icons">close</i>
      </div>
      <input id="input_search" value="" />
    </div>
    </tr>
  </td>
  <td><button type="button" id="bt" onclick="clicked()">Button</button>
    <td/>
</table>
<table>
  <td>
    <div class="tag-container">
      <div id="span_tag">
        <span id="span_key" value=""></span>
        <i class="material-icons">close</i>
      </div>
      <input id="input_search" value="" />
    </div>
    </tr>
  </td>
  <td><button type="button" id="bt" onclick="clicked()">Button</button>
    <td/>
</table>

re

Ответ №1:

 const tagContainerNodes = document.querySelectorAll(".tag-container");
tagContainerNodes.forEach((tagContainerNode) => {
  const input = tagContainerNode.querySelector("input");
  input.addEventListener("keyup", e => {
    if (e.key === "Enter") {
      createTag(e.target.value, tagContainerNode, input);
      e.target.value = "";
    }
  });
});

function createTag(tagName, parent, before) {
  var div = document.createElement("div");
  div.setAttribute("class", "tag");
  var span = document.createElement("span");
  span.innerHTML = tagName;
  div.appendChild(span);
  parent.insertBefore(div, before)
}

function clicked() {
  const allTagText = [];
  tagContainerNodes.forEach((tagContainerNode) => {
    const tagNodes = tagContainerNode.querySelectorAll(".tag");
    tagNodes.forEach((tagNode) => {
      allTagText.push(tagNode.textContent);
    });
  });
  console.log(allTagText);
}  
 .tag-container {
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  display: flex;
}

.tag-container .tag {
  padding: 5px;
  border: 1px solid #ccc;
  margin: 5px;
  border-radius: 3px;
  background: #f2f2f2;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;
}

.tag-container input {
  font-size: 16px;
  padding: 5px;
  outline: none;
  border: 0;
}  
 <div class="tag-container">
  <input id="input_search" />
</div>
<button type="button" onclick="clicked()">Button</button>

<div class="tag-container">
  <input id="input_search" />
</div>
<button type="button" onclick="clicked()">Button</button>

<div class="tag-container">
  <input id="input_search" />
</div>
<button type="button" onclick="clicked()">Button</button>

Комментарии:

1. ваш ответ — решение. Большое спасибо за вашу помощь: D.