Hai All, Today I just want to share a new thing, Make our ‘Enter’ key to Tab in a webpage.
Suppose we have multiple text fields in a Web page and we don’t want use ‘Tab’ key and we can do the same with the ‘Enter’ key itself
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
$( document ).ready(function() {
$('input').keydown(function(event) {
if(event.which == 13) {
event.preventDefault();
$(this).nextAll('input:first').focus();
}
});
});
</script>
</head>
<body>
<form method="post" action="#">
<input type="text" />
<br /><br />
<input type="text" />
<br /><br />
<input type="text" />
<br /><br />
<input type="submit" value="submit" />
</form>
</body>
</html> here the JQuery Function will do the thing for us
<script>
$( document ).ready(function() {
$('input').keydown(function(event) {
if(event.which == 13) {
event.preventDefault();
$(this).nextAll('input:first').focus();
}
});
});
</script> $('input').keydown( function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13) {
e.preventDefault();
var inputs = $(this).closest('form').find(':input:visible');
inputs.eq( inputs.index(this)+ 1 ).focus();
}
});
this will make the keyDown event for all the input
then this will check the keypress is ‘Enter’ using the if conditiona and then it will find all the inputs and find the next first input and focus is transferred to it
Hope this may help you
Hi. I’m Software Engineer in India. I’m Web Developer, Creative Coder, Web Designer, logo Designer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Designer. Inspired to make things looks better and Do the this in the best way.
0 comments:
Post a Comment