javascript - 如何仅在 bootstrap tagsinput 中接受字母

Question

所以我有这个问题。我希望 bootstrap tagsinput 只接受字母、逗号和回车键。如何解决这个问题呢？我使用这个 Bootstrap :https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

HTML:

<div class="form-group">
    <div class="col-sm-4">
        <input type="text" id="myinputs" class="form-control" name="skills" placeholder="Enter skill(s), separate each with a comma" data-role="tagsinput">
    </div>
</div>

JavaScript:

$(document).ready(function() {
    $('#myinputs').keypress(function(event){
    var inputValue = event.charCode;

    if (!(inputValue >= 65/*A*/ && inputValue <=90/*Z*/) && !(inputValue >=97/*a*/ && inputValue <= 122/*z*/) && (inputValue != 44/*comma*/ && inputValue != 13/*enter key*/)) {
        event.preventDefault();
    }

    });
});

当没有tagsinput 时，javascript 代码正在运行。如何解决这个问题？

Answer 1

这里是简单的方法，但是不包含css。

$('input').tagsinput({
  freeInput: true
});

$('input').on('beforeItemAdd', function(event) {
  // event.cancel: set to true to prevent the item getting added
  event.cancel = !(/^[0-9A-Za-z\.,\n]+$/.test(event.item));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://rawgit.com/TimSchlechter/bootstrap-tagsinput/master/src/bootstrap-tagsinput.js"></script>



<input type="text" id="category" data-role="tagsinput" />