Html form tabindex control by Jquery, follow below code:
*note: this below code actually a hint, programmers can understand how to use it:
<form id="form1" name="form1" action="saver.php" method="post">
<label>Name:</label>
<input name="name" value="" tabindex="1">
<label>Roll:</label>
<input name="roll" value="" tabindex="2">
<label>Address:</label>
<input name="address" value="" tabindex="3">
<label>Phone:</label>
<input name="phone" value="" tabindex="4">
<label>Email:</label>
<input name="email" value="" tabindex="5">
<input type="submit" tabindex="6">
</form>
----------------------------------------------------------------------------------------------
<script>
$(document).ready(function () {
$("#form1 input:first").focus();
$('#form1').on('keydown', 'input', function (event) {
if (event.which == 13) {
var $this = $(event.target);
var index = parseFloat($this.attr('tabindex'));
$('[tabindex="' + (index + 1).toString() + '"]').focus();
if (index == 6) {
return true;
}
return false;
}
});
});
</script>
*note: this below code actually a hint, programmers can understand how to use it:
<form id="form1" name="form1" action="saver.php" method="post">
<label>Name:</label>
<input name="name" value="" tabindex="1">
<label>Roll:</label>
<input name="roll" value="" tabindex="2">
<label>Address:</label>
<input name="address" value="" tabindex="3">
<label>Phone:</label>
<input name="phone" value="" tabindex="4">
<label>Email:</label>
<input name="email" value="" tabindex="5">
<input type="submit" tabindex="6">
</form>
----------------------------------------------------------------------------------------------
<script>
$(document).ready(function () {
$("#form1 input:first").focus();
$('#form1').on('keydown', 'input', function (event) {
if (event.which == 13) {
var $this = $(event.target);
var index = parseFloat($this.attr('tabindex'));
$('[tabindex="' + (index + 1).toString() + '"]').focus();
if (index == 6) {
return true;
}
return false;
}
});
});
</script>
No comments:
Post a Comment