Javascript 如何在输入元素中创建我的标记

标记项显示在输入元素上方，但我希望它们位于输入元素内部。我已经包括了jQuery代码和CSS。有人能给我一些建议吗

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

      hiddenInput.setAttribute('type', 'hidden');
      hiddenInput.setAttribute('name', el.getAttribute('data-name'));
      mainInput.setAttribute('name', 'tag');
      mainInput.setAttribute('id', 'tag2');
      mainInput.setAttribute('placeholder', 'Contoh: akreditasi, banding, TUK mandiri')
      mainInput.setAttribute('type', 'text');
      mainInput.classList.add('main-input');
      mainInput.addEventListener('input', function() {
        let enteredTags = mainInput.value.split(',');
        if (enteredTags.length > 1) {
          enteredTags.forEach(function(t) {
            let filteredTag = filterTag(t);
            if (filteredTag.length > 0)
              addTag(filteredTag);
          });
          mainInput.value = '';
        }

      });

      ...

.tags输入{}
.main输入{}
.tags输入.tag{
字号：85%；
填充：0.5em 0.75em；
边缘：0.25em 0.1m；
显示：内联块；
背景色：#ddd；
边界半径：10%；
}
.tags输入.tag.close:：after{
内容：“x”；
字体大小：粗体；
左边距：0.75em；
显示：内联块；
转化：（1.2）；
光标：指针；
}
.标签输入.主输入{
边界：0；
大纲：0；
}

。。。
标签
...

您可以创建一个工作小提琴，或发布完整的小提琴吗code@AkhilAravind这里是完整的代码共享这里是完整的代码。您的代码段不工作。在小提琴上也是不行的working@MihaiT就我个人而言，我认为它比现在的输入字段看起来更好。在不将输入方式推到右侧的情况下，为标记留出更多空间，这将很尴尬。在这种情况下，我认为诡计和“酷”因素对可用性不利，不值得这么做。只是我的意见。