twitter-bootstrap - 引导令牌字段 inputType 电子邮件不起作用

Question

我正在使用引导程序和令牌字段插件来获取多封电子邮件。我曾经提到过这样的。

<input type="email" id="token-friend-email" class="friend-email form-control input-border input-style" value="" placeholder="" required>

和

$('#token-friend-email').tokenfield({
    inputType : 'email',
    delimiter:';'

});

但是令牌字段接受所有类型的输入。我只想接受电子邮件类型。帮我解决这个问题。

Answer 1

我使用了相同的@shri，但我做了一点修改。

利用

$(e.relatedTarget).empty().hide().attr('data-value', '');

而不是这个

$(e.relatedTarget).addClass('invalid')   

演示检查此演示

html部分

<input type="text" class="form-control" id="tokenfield" value="" />

这是jquery部分...

$('#tokenfield')

  .on('tokenfield:createtoken', function (e) {
    var data = e.attrs.value.split('|')
    e.attrs.value = data[1] || data[0]
    e.attrs.label = data[1] ? data[0] + ' (' + data[1] + ')' : data[0]
  })

  .on('tokenfield:createdtoken', function (e) {
    // Über-simplistic e-mail validation
    var re = /\S+@\S+\.\S+/
    var valid = re.test(e.attrs.value)
    if (!valid) {
      $(e.relatedTarget).addClass('invalid')
    }
  })

  .on('tokenfield:edittoken', function (e) {
    if (e.attrs.label !== e.attrs.value) {
      var label = e.attrs.label.split(' (')
      e.attrs.value = label[0] + '|' + e.attrs.value
    }
  })

  .on('tokenfield:removedtoken', function (e) {
    alert('Token removed! Token value was: ' + e.attrs.value)
  })

  .tokenfield()

Answer 2

演示检查此演示

html部分

<input type="text" class="form-control" id="tokenfield" value="" />

这是jquery部分...

$('#tokenfield')

  .on('tokenfield:createtoken', function (e) {
    var data = e.attrs.value.split('|')
    e.attrs.value = data[1] || data[0]
    e.attrs.label = data[1] ? data[0] + ' (' + data[1] + ')' : data[0]
  })

  .on('tokenfield:createdtoken', function (e) {
    // Über-simplistic e-mail validation
    var re = /\S+@\S+\.\S+/
    var valid = re.test(e.attrs.value)
    if (!valid) {
      $(e.relatedTarget).addClass('invalid')
    }
  })

  .on('tokenfield:edittoken', function (e) {
    if (e.attrs.label !== e.attrs.value) {
      var label = e.attrs.label.split(' (')
      e.attrs.value = label[0] + '|' + e.attrs.value
    }
  })

  .on('tokenfield:removedtoken', function (e) {
    alert('Token removed! Token value was: ' + e.attrs.value)
  })

  .tokenfield()

Answer 3

嗨@shri 我试过用这个我们也可以用这个

$(e.relatedTarget).empty().hide()

代替

$(e.relatedTarget).empty().hide().attr('data-value', '');