How to get Javascript F2 button behaviour like MS Excel

Question

Part of Html code

    <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 input field date1 and press navigation key right arrow I get to input field amount1. That is ok.

If for example in field amount1 I enter incorrect amount and want to correct it, I try to press navigation key left arrow and want to go to necessary character. However I get to input field date1.

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

Answer 1

So I've made using a class and the readonly attribute. Code 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's 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');
    }

});

Clink on one to select it and you can move around. F2 makes input editable and arrows works as default on inputs. Clicking on another table, pressing Enter or ESC all put input back to readonly and moving arrows works again.

See demo @ jsFiddle