CODEWITHSUNDEEP
javascriptjquery
Neethu Kp
Neethu Kp

Reputation: 157

Detect Comma/Enter key press

There are some comma separated values in an input field. I want to alert a message when I am pressing the COMMA(,) or ENTER key. I have given the code that I used for this, but didn't work. Is there anything inefficient about this?

$(document).on("keyup", '.tagsinput', function (e) {
    if (e.which == 13 || e.which == 44) {
        alert('comma added');
    }
});

Upvotes: 10

Views: 17060

Answers (6)

Gibolt
Gibolt

Reputation: 47107

Use event.key and modern JS!

No number codes anymore. You can check for Enter or , key directly.

const input = document.getElementById("inputId");
input.addEventListener("keypress", function (event) {
    if (event.key === "Enter" || event.key === ",") {
        // Do something
    }
});

Mozilla Docs

Supported Browsers

Upvotes: 4

Alex McMillan
Alex McMillan

Reputation: 17952

The keycode (which in jQuery) for a comma is 188

There is a brilliant tool for this here

Upvotes: 14

Dula wnRp
Dula wnRp

Reputation: 163

$(document).ready(function(){
    $("#tagsinput").bind('keypress', function(e) {
        var code = e.keyCode || e.which;
        if(code == 44) { // comma key code is 44
            str= $('#tagsinput').val();
            str.substring(0, str.length - 2);
            arr = str.split(",");
            key = arr[arr.length-1];
            arr.splice(arr.length-1, 1);
            if(arr.indexOf( key )!=-1){
                alert("Duplicate detected : "+key);
                //uncomment the next line to remove the duplicated word just after it detects !
                //$('#tagsinput').val(arr);
            }
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<label>Sub Location Names</label> 
<input name="tagsinput" id="tagsinput" class="tagsinput" data-maxwidth="200" id="ptag" value="" />

hope this will work for you :)

Upvotes: 0

user2575725
user2575725

Reputation:

Try using keypress instead of keyup:

$(function() { //<-- you are missing this
  $(document).on("keypress", '.tagsinput', function(e) { //<-- note, its keypress
    console.log('key pressed ', e.which);
    if (e.which == 13 || e.which == 44) {
      return false; //<-- prevent
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type='text' class='tagsinput' />
<input type='text' class='tagsinput' />

Upvotes: 3

SzybkiSasza
SzybkiSasza

Reputation: 1599

You shouldn't listen for keyup, better way is to listen for keypress:

$('.tagsinput').keypress(function (e) {
    if (e.which == 13 || e.which == 44) {
        alert('comma added');
    }
});

Jsfiddle here: http://jsfiddle.net/doe7qk6r/

Upvotes: 0

Tushar
Tushar

Reputation: 87203

$(document).on("keyup", '.tagsinput', function (e) {
    if (e.keyCode == 188) { // KeyCode For comma is 188
        alert('comma added');
    }
});

Demo: http://jsfiddle.net/tusharj/3yLwgwhb/

Upvotes: 6

Related Questions