javascript - 如何定义 bootstrap tokenfield 以与 textarea 一起使用

Question

我试图定义 tokenfield在高度更高但显示为文本框(单行)的文本区域上。如何自定义 token 字段以使用文本区域？

<textarea name="f1_email" placeholder="Enter Friends's Email separated by comma" class="f1-facebook form-control" rows="10" cols="30" id="f1-referral-email"></textarea>

$('#f1-referral-email').on('tokenfield:createdtoken', function (e) {
    var valid = isEmail(e.attrs.value);
    if (!valid) {
        $(e.relatedTarget).addClass('invalid')
    }
}).tokenfield()

---

实际输出:

感谢任何帮助或建议，提前致谢。

Answer 1

正如所说here ，tokenfield可以通过它的CSS(bootstrap-tokenfield.css)来调整。请检查并查找 (input-sm、input-lg 等)。这只是创建自定义文本区域 的技巧。然后在您的 input 标记中选择适当的类。或者，如果您想创建自定义尺寸，请引用以下代码:

HTML:

<div class="form-group form-group-xl">
  <input type="text" class="form-control" id="my-tokenfield">
</div>

CSS:

.form-group.form-group-xl .form-control {
  height: 50px;
  line-height: 50px;
}
.form-group.form-group-xl .tokenfield {
  height: auto;
  min-height: 50px;
}