CODEWITHSUNDEEP
javascriptjqueryeventsonkeyup
Jenz
Jenz

Reputation: 8369

Not getting keycode in keyup function

I'm trying to add a keyup function to an input field which is added to DOM using jquery.

$("#testDiv").html("<input id='testTextbox' name='testTextbox' type='text' onkeyup='testKeyUp(this)'>");

I want to do some operations once user enters value in testTextbox and enter key is pressed.

The keyup function is like:

function testKeyUp(e) {
alert(e.keyCode+" : "+e.which);
}

The e.keyCode and e.which is returning undefined.

How can I get the keycode in keyup function? Can anyone help me to fix this? Thanks in advance.

Upvotes: 2

Views: 2492

Answers (5)

edkeveked
edkeveked

Reputation: 18381

I guess, you are mixing different things: pure js and jquery. Using only jquery, you can achieve what you want with the snippet below. 

$("#testTextbox").on("keyup", function(e){
alert(e.keyCode+" : "+e.which);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='testTextbox' name='testTextbox' type='text' >

Using only pure Js

function testKeyUp(e){
  alert(e.keyCode+" : "+e.which);
}
<input id='testTextbox' name='testTextbox' type='text' onkeyup='testKeyUp(event)'>

Upvotes: 1

IRay
IRay

Reputation: 36

    $("#testTextbox").on("keyup", function(e){
    if (e.key=="Enter"){
        // Your logic here
    }
    })

    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <input id='testTextbox' name='testTextbox' type='text' >

As @edkeveked answered above, but I would use event.key instead of event.keycode, as keycode and which are being deprecated according to https://developer.mozilla.org/en-US/docs/Web/Events/keyup

Upvotes: 1

user9019817
user9019817

Reputation:

Using inline events is complicating this. e is acting as this in the function. It would be easier to modify the code slightly to remove the inline event, and instead write it as:

$("#testDiv").html("<input id='testTextbox' name='testTextbox' type='text'>");

var textInput = document.getElementById('testTextbox');

textInput.addEventListener('keyup', function(e){
alert(e.keyCode+" : "+e.which);
});

Or

$("#testDiv").html("<input id='testTextbox' name='testTextbox' type='text'>");

$('#testTextbox').on('keyup', function(e){
alert(e.keyCode+" : "+e.which);
});

Here's a working example:

$("#testDiv").html("<input id='testTextbox' name='testTextbox' type='text'>");

var textInput = document.getElementById('testTextbox');

textInput.addEventListener('keyup', function(e){
alert(e.keyCode+" : "+e.which);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="testDiv"></div>

Upvotes: 1

Ashwin Pc
Ashwin Pc

Reputation: 24

Firstly i notice that your function name for the event handler does not match the onkeyup callback name.

Make sure the two match. And secondly

onkeyup='testKeyUp(e)'

Upvotes: 0

G&#252;ney Saramalı
G&#252;ney Saramalı

Reputation: 799

Here is What You need.

You named the function as testKeyUp() and the real name of the function is shippingPackageKeyValueKeyUp(e). Also you wont get this but event

JS

$("#testDiv").html("<input id='testTextbox' name='testTextbox' type='text' onkeyup='testKeyUp(event)'>");

function testKeyUp(e) {
alert(e.keyCode+" : "+e.which);
}

Upvotes: 0

Related Questions