This is a little experiment on how to use enter as a mean to move to the next input field in web application ala dos application. We need jquery here.
Here we simply trap the enter key with keypress event.
Inside the event, we check the control tabIndex. Actually, the html elements have tabIndex property, unfortunately (at least in my case with google chrome) the value always 0, so we need a helper funtion myTabPosition which simply scan the parent's child node until it find itself name.
After we have the tab index, we simply focus to the next sibling.
Here is my solution:
Inside the event, we check the control tabIndex. Actually, the html elements have tabIndex property, unfortunately (at least in my case with google chrome) the value always 0, so we need a helper funtion myTabPosition which simply scan the parent's child node until it find itself name.
After we have the tab index, we simply focus to the next sibling.
Here is my solution:
<html>
<head>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready
(
function()
{
$(".ala_desktop").keypress
(
function(event)
{
if (event.which==13)
{
i = myTabPosition(this) + 1;
nxt=this.form.elements[i];
nxt.focus();
nxt.select();
return false;
}
return true;
}
)
}
)
function myTabPosition( o )
{
var MyName = o.name;
var MyParent = o.form;
var i;
var retval = -1;
for (i = 0 ; i < MyParent.elements.length - 1 ; i++ )
{
if ( MyParent.elements[i].name == MyName )
{
retval = i;
break;
}
}
return retval;
}
</script>
<form name="coba">
Name : <input type="text" name="Name" id="Name" class="ala_desktop"><br>
Address : <input type="text" name="Address" id="Address" class="ala_desktop"><br>
City : <input type="text" name="City" id="City" class="ala_desktop">
</form>
</body>
</html>
Comments
Post a Comment