Well I get this request all the time from users that we want the form to submit when we press the ENTER key rather than actually clicking on the SUBMIT button. This is a much better user experience if you say for example type an user name and password, then press ENTER instead of using the mouse to click on the LOGIN button. In this tutorial we are going to learn how to do this using plain JavaScript, jQuery and ExtJs frameworks. The basic concept behind all of them is to capture the Keypress event and then check if the event keyCode is 13, which is the ENTER key. In these examples we are checking if the ENTER key was pressed but you can modify the program to check for TAB, HOME, ARROW keys etc.
JavaScript ENTER key example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript how to check for ENTER key</title>
<script type="text/javascript">
window.onload = function(){
//get reference to the password element
var password = document.getElementById("password");
//bind the onkeypress event to the password field
password.onkeypress = function(event){
checkEnterPressed(this,event);
event.cancelBubble = true;
if (event.stopPropagation) event.stopPropagation();
};
//if you want to press enter anywhere on the page
document.onkeypress = function(event){
checkEnterPressed(this,event);
event.cancelBubble = true;
if (event.stopPropagation) event.stopPropagation();
};
}
function checkEnterPressed(obj, event){
//console.log(obj, event.keyCode);
//we are checking for ENTER key here,
//you can check for other key Strokes here as well
if(event.keyCode === 13){
alert("Login form was submitted by ENTER key!");
}
}
function doProcessing(){
//your business logic here or
//submit the form
alert("Login form was submitted by BUTTON Click!");
}
</script>
</head>
<body>
<div id="myExample">
<form id="myForm" action="">
<fieldset>
<p>
<label for="userId">
UserId:
</label><br />
<input
id="userId" type="text" name="inputBox" />
</p>
<p>
<label for="password">
Password:
</label><br />
<input
id="password" type="password" name="inputBox" />
</p>
<p>
<input
id="myButton" type="button" name="myButton" value="SUBMIT"
onClick="JavaScript:doProcessing()">
</p>
</fieldset>
</form>
</div>
</body>
</html>
jQuery ENTER key example
<!DOCTYPE html>
<html>
<head>
<title>jQuery how to check for ENTER key</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//check for the button click
$("#addToCart").click(function(event){
//do your validation or any other logic
alert("Item added to Shopping Cart with BUTTON Click!");
});
//attach keypress event listener to the quantity field
$('#quantity').keypress(function(event){
//Check if the key pressed is ENTER key using the keyCode=13
if(event.keyCode === 13){
alert('Item added to Shopping Cart using ENTER Key!');
}
event.cancelBubble = true;
if (event.stopPropagation) event.stopPropagation();
});
//attach keypress event listener to the whole document
$(document).keypress(function(event){
if(event.keyCode === 13){
alert('Item added to Shopping Cart using ENTER Key!');
}
event.cancelBubble = true;
if (event.stopPropagation) event.stopPropagation();
});
});
</script>
</head>
<body>
<div id="myExample">
<form id="myOrderForm" action="">
<fieldset>
<p>
<label for="itemNumber">
Item Number:
</label><br />
<input
id="itemNumber" type="text" name="itemNumber" />
</p>
<p>
<label for="quantity">
Quantity:
</label><br />
<input
id="quantity" type="text" name="quantity" />
</p>
<p>
<input
id="addToCart" type="button" name="addToCart"
value="Add To Cart">
</p>
</fieldset>
</form>
</div>
</body>
</html>
ExtJs ENTER key example
<!DOCTYPE html>
<html>
<head>
<title>ExtJs how to check for ENTER key</title>
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css">
<style type="text/css">
</style>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'myApp',
appFolder: 'app/enterKey',
controllers: [
'MyController'
],
launch: function() {
Ext.create('Ext.container.Container', {
renderTo: 'myExample',
height: 250,
width: 300,
layout: {
align: 'stretch',
type: 'vbox'
},
defaults: {
labelWidth: 100,
margin: '5 5 5 5 '
},
items: [{
xtype: 'textfield',
name: 'userId',
fieldLabel: 'User Id'
},{
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password'
},{
xtype: 'button',
text: 'Login'
}]
});
}
});
</script>
</head>
<body>
<div id="myExample"></div>
</body>
</html>
Ext.define('myApp.controller.MyController', {
extend : 'Ext.app.Controller',
init : function() {
this.control({
'container' : {
render : this.onContainerRendered
},
'container button' : {
click : this.onButtonClick
},
'container textfield' : {
specialkey : this.onKeyPress
}
});
},
onContainerRendered : function() {
//console.log('The container was rendered');
},
onButtonClick : function(button) {
//console.log('Button Click');
//your form validations here
Ext.Msg.alert("ALERT","Login form was submitted using BUTTON Click!");
},
onKeyPress : function(obj, event) {
//console.log('Navigation keys such as arrows, tab, enter, esc, etc.');
//your form validations here, various ExtJs Key events
//event.HOME, event.END, event.PAGE_UP, event.PAGE_DOWN, event.TAB, event.ESC
//arrow keys: event.LEFT, event.RIGHT, event.UP, event.DOWN
if (event.getKey() == event.ENTER) {
Ext.Msg.alert("ALERT","Login form was submitted using ENTER Key!");
}
}
});
References
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.