I have implemented a Javascript function to enable the use of arrow keys for navigating through 4 textboxes within an ASP Listview. While I can successfully move from Textbox1 to Textbox4 using the left arrow key, I am encountering an issue where I cannot navigate back from Textbox4 to Textbox1 using the right arrow key. Please refer to the image below for a visual representation.
<script type="text/javascript">
$('input[type="text"],textarea').keydown(function (e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if (key == 39) {
e.preventDefault();
var inputs = $(this).parents('form').find(':input[type="text"]:enabled:visible:not("disabled"),textarea');
inputs.eq(inputs.index(this) + 1).focus();
inputs.eq(inputs.index(this) + 1).click();
}
if (key == 37) {
e.preventDefault();
var inputs = $(this).parents('form').find(':input[type="text"]:enabled:visible:not("disabled"),textarea');
inputs.eq(inputs.index(this) - 1).focus();
inputs.eq(inputs.index(this) - 1).click();
}
});
</script>