Question

我正在使用bootstrap和Token Field插件来获取多封电子邮件。我已经这样提过了。

<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')

DEMO 查看此演示

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

DEMO 查看此演示

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（）。隐藏（）

而不是

$（e.relatedTarget）.empty（）。hide（）。attr（＆＃39; data-value＆＃39;，＆＃39;＆＃39;）;

Bootstrap令牌字段inputType电子邮件不起作用

3 个答案: