如何让Bootstrap Tags Input组件按下回车键不将文本转为标签？

当然可以实现自由文本和标签共存的效果！Bootstrap Tags Input默认把回车键当作标签分隔符之一，我们只需要调整配置或者监听事件就能搞定这个需求。

方法一：修改组件配置（推荐） #

最稳妥的方式是通过初始化配置，去掉回车键作为分隔符的设定，同时开启自由输入模式：

<div class="bs-example">
  <input type="text" id="multiInput" value="Amsterdam,Washington,Sydney,Beijing,Cairo" />
</div>

<script>
// 手动初始化组件，自定义配置
$('#multiInput').tagsinput({
  delimiter: ',', // 仅保留逗号作为标签分隔符，移除回车
  freeInput: true // 开启自由输入，允许未转换为标签的文本存在
});
</script>

这里的freeInput: true是核心——默认情况下组件会强制把输入内容转为标签，开启这个选项后，用户可以输入普通文本，只有按下逗号时才会生成标签，回车键就只是普通的回车操作啦。

方法二：监听回车事件阻止默认行为 #

如果你更倾向于保留data-role的自动初始化方式，可以通过监听键盘事件来阻止回车的转标签行为：

<div class="bs-example">
  <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
</div>

<script>
$('input[data-role="tagsinput"]').on('keydown', function(e) {
  // 捕获回车键（keyCode 13）
  if (e.keyCode === 13) {
    e.preventDefault(); // 阻止默认的转标签动作
    // 如果需要换行（比如用textarea替代input的话），可以添加下面的代码
    // $(this).val($(this).val() + '\n');
  }
});

// 别忘了确保自由输入模式开启
$('input[data-role="tagsinput"]').tagsinput('option', 'freeInput', true);
</script>

这种方式适合不想改动原有HTML结构的场景，不过还是建议配合freeInput: true一起使用，避免组件强制转换文本为标签。

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