如何在物化CSS标签输入上设置最小和最大标签数

<input type="text" id="tag-input" />

<style>
#tag-input {
  /* 添加样式以美化输入框 */
}
</style>

<script>
const tagInput = document.getElementById('tag-input');
tagInput.addEventListener('keyup', handleTagInput);

function handleTagInput(event) {
  const tags = event.target.value.split(','); // 假设标签以逗号分隔
  const minTags = 2; // 设置最小标签数
  const maxTags = 5; // 设置最大标签数

  if (tags.length < minTags) {
    // 如果标签数小于最小标签数，禁止输入
    event.target.value = '';
  } else if (tags.length > maxTags) {
    // 如果标签数大于最大标签数，截断多余的标签
    event.target.value = tags.slice(0, maxTags).join(',');
  }
}
</script>