Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
How to call a jquery function on keypress
3192 Views
Example 1 : keypress function code
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("input[name$='textbox']").keypress(function (e) {
                if (e.keyCode == 13) {
                    alert("you pressed enter button");
                }
            });
        });
    </script>
</head>

<body>
    <input name="textbox" type="text" />
</body>

</html>
Demo : Example 1 
Example 2: keyup function code
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("input[name$='textbox']").keyup(function (e) {
                if (e.keyCode == 13) {
                    alert("you leaved enter button");
                }
            });
        });
    </script>
</head>

<body>
    <input name="textbox" type="text" />
</body>

</html>
Demo : Example 2 
Hints 
keypress() function execute when you press any button in key board.Inside that fuction if condition is used to find which button is pressed.ascii code is performing as a key code in keypress function.ascii code for enter button is 13, for escape button is 27.

Example 1,when you press enter button after click into text box it shows alert that "you have pressed enter button".

Keyup() function is opposite to keypress().Keypress function call when press the button.keyup() function execute when leave the button.

Example 2,when you leave enter button after click into text box it shows alert that "you have leaved enter button".
Next Topics
Next lessons of current book.
Previous Topics
Previous lessons of current book.
Best Lessons of "JQuery Examples"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details