Laravel 9论坛项目：如何实现按空格分割输入标签并展示？

针对你的Laravel 9论坛项目需求，可通过JavaScript监听空格键事件，实现输入标签的实时展示，以下是具体实现方案：

原生JavaScript实现（无依赖） #

直接通过原生DOM操作完成，无需第三方库：

document.addEventListener('DOMContentLoaded', function() {
    const tagInput = document.getElementById('tags');
    const tagShow = document.getElementById('tagshow');
    // 添加隐藏输入框，用于提交时传递标签数据
    const hiddenTags = document.createElement('input');
    hiddenTags.type = 'hidden';
    hiddenTags.name = 'tags';
    tagInput.parentNode.appendChild(hiddenTags);

    let tags = [];

    tagInput.addEventListener('keydown', function(e) {
        if (e.key === ' ') {
            e.preventDefault(); // 阻止输入框添加空格
            const tag = tagInput.value.trim();
            
            // 过滤空标签和重复标签
            if (tag && !tags.includes(tag)) {
                tags.push(tag);
                renderTags();
                tagInput.value = ''; // 清空输入框，准备输入下一个标签
            }
        }
    });

    // 渲染标签到展示区域
    function renderTags() {
        const tagHtml = tags.map(tag => `<strong><code>#${tag}</code></strong>`).join(' ');
        tagShow.innerHTML = tagHtml;
        hiddenTags.value = tags.join(','); // 同步更新隐藏输入框值
    }
});

jQuery实现（适合已引入jQuery的项目） #

如果你的Laravel项目已引入jQuery，可使用更简洁的代码：

$(document).ready(function() {
    let tags = [];
    // 添加隐藏输入框
    $('#tags').after('<input type="hidden" name="tags" id="hidden-tags">');

    $('#tags').on('keydown', function(e) {
        if (e.key === ' ') {
            e.preventDefault();
            const tag = $(this).val().trim();
            
            if (tag && !tags.includes(tag)) {
                tags.push(tag);
                renderTags();
                $(this).val('');
            }
        }
    });

    function renderTags() {
        const tagHtml = tags.map(tag => `<strong><code>#${tag}</code></strong>`).join(' ');
        $('#tagshow').html(tagHtml);
        $('#hidden-tags').val(tags.join(','));
    }
});

Laravel后端处理 #

表单提交后，在控制器中接收并处理标签数据：

public function store(Request $request)
{
    // 验证输入
    $validated = $request->validate([
        'tags' => 'nullable|string',
        // 其他表单字段验证规则
    ]);

    // 将逗号分隔的标签转为数组
    $tags = $request->tags ? explode(',', $request->tags) : [];
    
    // 示例：保存帖子并关联标签（需提前建立Post与Tag的多对多关联）
    $post = Post::create($validated);
    $post->tags()->sync($tags);

    return redirect()->route('posts.index')->with('success', '帖子发布成功');
}

可选优化 #

• 处理粘贴标签：监听input事件，自动拆分用户粘贴的多空格分隔标签：

  // 原生JS示例
  tagInput.addEventListener('input', function() {
      const inputTags = this.value.split(' ').filter(t => t.trim());
      inputTags.forEach(tag => {
          if (tag && !tags.includes(tag)) tags.push(tag);
      });
      this.value = '';
      renderTags();
  });
  

• 可删除标签：给每个标签添加点击删除功能，提升体验：

  // 修改renderTags函数
  function renderTags() {
      const tagHtml = tags.map((tag, index) => `
          <span style="margin-right:8px;">
              <strong><code>#${tag}</code></strong>
              <button onclick="removeTag(${index})" style="border:none;background:transparent;color:red;cursor:pointer;">×</button>
          </span>
      `).join('');
      tagShow.innerHTML = tagHtml;
      hiddenTags.value = tags.join(',');
  }
  
  function removeTag(index) {
      tags.splice(index, 1);
      renderTags();
  }
  

内容的提问来源于stack exchange，提问作者Pouya Vaghefi