如何将输入限制为仅5个标签

时间:2017-08-22 04:30:05

标签: javascript jquery html

这是用于进行输入标记的JS文件。我想将用户的输入限制为仅5个标签。我想在调用if函数时做一个addTag()语句,但它对我没有任何帮助。

这是我的网站的JavaScript,用于处理我网站的标记部分。

[].forEach.call(document.getElementsByClassName('tags-input'), function (el) {
  let hiddenInput = document.createElement('input'),
      mainInput = document.createElement('input'),
      tags  = new Array(5);

  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', el.getAttribute('data-name'));

  mainInput.setAttribute('type', 'text');
  mainInput.classList.add('main-input');
  mainInput.addEventListener('input', function () {

    let enteredTags; let s=0;

    if( enteredTags = mainInput.value.split(" ") ){
      if(s<5){
        if (enteredTags.length > 1 ) {
          enteredTags.forEach(function (t) {
            let filteredTag = filterTag(t);
            if (filteredTag.length > 0)
              addTag(filteredTag);


          });
          mainInput.value = '';
          s++;
        }
        else if(s > 5)
        {
          alert("5 Tags Allowed");
        }
      }
    }

  });

  mainInput.addEventListener('keydown', function (e) {
    let keyCode = e.which || e.keyCode;
    if (keyCode === 8 && mainInput.value.length === 0 && tags.length > 0) {
      removeTag(tags.length - 1);
    }

  });

  el.appendChild(mainInput);
  el.appendChild(hiddenInput);

  addTag('hello!');

  function addTag (text) {
    var size = 0;

    var tag = {
      text: text,
      element: document.createElement('span'),
    };

    tag.element.classList.add('tag');
    tag.element.textContent = tag.text;

    let closeBtn = document.createElement('span');
    closeBtn.classList.add('close');
    closeBtn.addEventListener('click', function () {
      removeTag(tags.indexOf(tag));
    });
    tag.element.appendChild(closeBtn);

    tags.push(tag);

    el.insertBefore(tag.element, mainInput);

    refreshTags();
    size++;


  }

  function removeTag (index) {
    let tag = tags[index];
    tags.splice(index, 1);
    el.removeChild(tag.element);
    refreshTags();
  }

  function refreshTags () {
    let tagsList = [];
    tags.forEach(function (t) {
      tagsList.push(t.text);
    });
    hiddenInput.value = tagsList.join(',');
  }

  function filterTag (tag) {
    return tag.replace(/[^\w -]/g, '').trim().replace(/\W+/g, '-');
  }
});

This is a glimpse of my site
我想在标签框的搜索上添加标签。

0 个答案:

没有答案