Bootstrap 标签输入 - 在标签之间添加

Question

我有一个标签输入字段，我必须在其中进行一些更改。例如，我以前有这个字段->

我用箭头键将光标移回并删除 "test" 标签 ->

然后我在同一位置再次重新输入 ->

我按向右箭头键并将光标放回原处。我提交的表格如上图所示，订单为 "test,phrase"。但结果是"phrase,test"。我想保留我编辑它的顺序。知道这里出了什么问题吗？

HTML代码->

<div class="col-md-8 col-xs-12">
    <input type="text" data-role="tagsinput" class="form-control" name="phrases" placeholder="Enter Phrases In Order" value="<?php echo $phrases;?>" required>
</div>

正在以逗号分隔格式从 MySQL 中检索 php 变量 $phrases。

$phrases="test,phrase";

真的没有多少代码。我只想在编辑后保留订单。

Answer 1

我对此进行了一些研究，但在文档中找不到任何自定义选项来解决此问题。我想出了一个简单的修复方法，您可以在其中稍微修改 bootstrap-tagsinput.js 代码。希望对您有所帮助。

找到这行代码：

self.itemsArray.push(item);

并用这个替换它：

self.itemsArray.splice(self.findInputWrapper().index(), 0, item);

更改标签后，您可以执行 console.log($("input").tagsinput('items')); 查看返回的 array。

.push() 将值添加到 array 的末尾，但是当您使用 .splice() 时，您可以指定添加它的位置。

这应该可以解决您的问题。

Bootstrap 标签输入 - 在标签之间添加

Bootstrap Tags Input - Add Between Tags

javascript

jquery

twitter-bootstrap

bootstrap-tags-input