限制JS生成的HTML标签

Question

下面的 JS 代码从输入中捕获单词作为主题标签，并将它们转换为 HTML span 标签。我只需要限制用户生成的单词和跨度标签的数量。例如10个字。此外，通过按空格键，用户可以删除标签。

const BACKSPACE = 8;
const ENTER = 32;
document.getElementById('tag-input').addEventListener('keydown', adjust);

function adjust(e) {
  const val = e.target.value;

  if (e.keyCode === BACKSPACE && !val) {
    deleteTag();
  }

  if (e.keyCode === ENTER && val) {
    e.target.value = '';
    addTag(val);
  }

  const textLength = textLengthToPx(val);
  const inputWidth = e.target.offsetWidth;
  const minThreshold = 1;
  const maxThreshold = 200;
  const delta = inputWidth - textLength;
  const shouldGrow = delta < minThreshold;
  const shouldShrink = delta > maxThreshold;

  if (shouldGrow) {
    setStyle(e.target, 'width', '90%');
  } else if (shouldShrink) {
    e.target.style = '';
  }
}

function deleteTag() {
  document.querySelectorAll('#tags > span')[document.querySelectorAll('#tags > span').length - 1].remove();
}

function addTag(val) {
  const input = document.getElementById('tag-input');
  const tag = document.createElement('span');
  const tagsContainer = document.getElementById('tags');
  tag.className = 'tag';
  tag.innerHTML = val;
  let counter = 0;
  while (counter <= 5) {
    tagsContainer.insertBefore(tag, input);
    counter++;
  }
}

function setStyle(node, rule, value) {
  node.style = `${rule}:${value}`;
}

function textLengthToPx(text) {
  const span = document.createElement('span');
  span.innerHTML = text;
  span.className = 'invisible';
  return span.offsetWidth;
}

<textarea id="tag-input"></textarea>

Answer 1

通过添加计数器解决了问题。