Question

所以我有这个问题。我希望bootstrap tagsinput只接受字母，逗号和输入密钥。如何解决这个问题呢？我使用这个引导程序：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

你可以使用下面的正则表达式来检查字母，逗号，

/^[A-Za-z,]$/;

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

    if (!/^[A-Za-z,]$/.test(event.item)) {
    // set to true to prevent the item getting added
        event.cancel = true;
    }

    });
});

你不能绕过这一点，无法将输入与正则表达式匹配，因为正则表达式与字符串模式匹配，而不是键盘输入。（我知道这就是你用它，但仍然。）

在检查正则表达式之前，最好的办法是检查特殊键的键码。回车键很可能是键码13（我没有检查过，但您可以通过将代码打印到屏幕上轻松检查）。

Answer 2

可能您可以尝试不同的方法并使用$('input').on('beforeItemAdd', function(event) { // check item contents if (!/^[a-zA-Z,]+$/.test(event.item)) { // set to true to prevent the item getting added event.cancel = true; } });事件来检查新项目的内容。如果它包含不需要的字符，则取消其添加。

{{1}}

Answer 3

你不能只用html做。你可以定义一个函数，如下所示：

<input type="text" id="myinputs" class="form-control" name="skills" placeholder="Enter skill(s), separate each with a comma" data-role="tagsinput"
    onkeydown="letterOnly(event)"/>


function letterOnly(event) {
  var key = event.keyCode;
  return ((key >= 65 && key <= 90) || key == 8 || key == 32);// 8 for backspace and 32 for space
};

Answer 4

这是一种简单的方法，但不包括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" />

如何仅在bootstrap tagsinput中接受字母

4 个答案: