CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Rak
Rak

Reputation: 139

How to accept letters only in bootstrap tagsinput

So I have this problem. I want bootstrap tagsinput to only accept letters, comma, and enter key. How to solve this problem? I use this 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();
    }

    });
});

When there is no tagsinput, the javascript code is working. How to solve this problem?

Upvotes: 0

Views: 3152

Answers (4)

Braj Ankit
Braj Ankit

Reputation: 333

you can use the below regular expression to check letters, comma,

/^[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;
    }

    });
});

And you must not bypass the point that, There is no way to match an enter with a regular expression, since regular expressions are made to match string patterns, not keyboard input. (I know that is what you use it for, but still).

Your best bet would be to check the keycode of the special keys, before you check against the regular expression. The enter key is most likely keycode 13 (I havent checked, but you can easily check by printing the code to the screen).

Upvotes: 0

Thaadikkaaran
Thaadikkaaran

Reputation: 5226

Here is the simple way, but css is not included.

$('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" />

Upvotes: 1

crazko
crazko

Reputation: 869

Probably you can try different approach and use beforeItemAdd event to check the content of new item. If it contains unwanted charactes you cancel its addition.

$('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;
  }
});

Upvotes: 0

Mohsen Kamrani
Mohsen Kamrani

Reputation: 7457

You cannot do it only with html. You can define a function an use it like this:

<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
};

Upvotes: 0

Related Questions