How to get Javascript F2 behavior like MS Excel

Question

HTML piece

<td><input type="text" name="date1" id="date1" value="<?php echo $_POST['date1']?>" size="1"></td> <td><input type="text" name="amount1" id="amount1" size="5"></td> 

This is javascript

 <script> $(document).ready(function(){ $('input').keyup(function(e){ if(e.which==39) $(this).closest('td').next().find('input').focus(); else if(e.which==37) $(this).closest('td').prev().find('input').focus(); else if(e.which==40) $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus(); else if(e.which==38) $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus(); }); }); </script> 

When I click on the date1 input field and press the navigation key to the right, I get input field 1. This is normal.

If, for example, in the amount1 field, I enter the wrong quantity and want to fix it, I try to press the left navigation key and want to move to the desired character. However, I get the input field date1.

Question. . What will be the javascript code to get behavior like MS Excel (if I press the F2 key and then the left / right arrow key, I move one character left / right if I press the exit key and then left / right arrow, I go to next input field)?

Answer 1

So, I made use of the class and readonly attribute. The code is fully commented below:

 $("input").on("click", function (event) { //If clicked, remove '.selected' from whoever currently has it as well as add readonly (in case someone clicks on another before pressing Enter or Esc to finish edit). $(".selected").removeClass("selected").attr('readonly', 'readonly'); $(this).addClass("selected").focus(); //Add selected to the clicked one }).keydown(function (event) { var key = event.keyCode || event.which; console.log(key); //If it readonly, then you can move around if ($(this).attr('readonly') == "readonly") { if (key == 39) $(this).removeClass("selected").closest('td').next().find('input').addClass("selected").focus(); else if (key == 37) $(this).removeClass("selected").closest('td').prev().find('input').addClass("selected").focus(); else if (key == 40) $(this).removeClass("selected").closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input').addClass("selected").focus(); else if (key == 38) $(this).removeClass("selected").closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').addClass("selected").focus(); } //If F2 was pressed if (key == 113) { //F2 //Remove readonly, allow to be edited and block moving arrows (you ca use arrows to navigate through letters, like a normal input $(this).prop('onclick', null).removeAttr('readonly'); } else if (key == 13 || key == 27) { //ENTER or ESC //Put readonly back, allow to move around $(this).attr('readonly', 'readonly'); } }); 

Talk to one to select him, and you can move around. F2 makes the input editable, and the arrows work by default on the inputs. Pressing the "Enter" or "ESC" key, click on another column to return to the original state, and the moving arrows work again.

See @jsFiddle demo