Question

I have managed to make the script below working in Firefox 12.0 . IE and Chrome do not work properly. Asuming the text area IDs are #ICCID and #MSISDN, the jQuery looks like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $(document).ready(function() {
            $("#ICCID").focus();
            });

            var $inp = $('.cls');

            $inp.bind('keydown', function(e) {
                var key = e.which;
                if (key == 9) {

                    e.preventDefault();
                    var nxtIdx = $inp.index(this) + 1;                  
                    $(".cls:eq(" + nxtIdx + ")").focus();

                //Simulate Enter after TAB
                var textInput = $("#MSISDN").val();
                var lines = textInput .split(/\r|\r\n|\n/);
                if (lines > 1) {

                    $("#MSISDN").on("keypress", function(e) {
                    if (e.keyCode == 9) {
                    var input = $(this);
                    var inputVal = input.val();
                    setTimeout(function() {
                    input.val(inputVal.substring(0,inputVal.length) + "\n");
                          }, 1);
                       }
                    });
                }



                }
                if (key == 9) {

                    e.preventDefault();
                    var nxtIdx = $inp.index(this) - 1;
                    $(".cls:eq(" + nxtIdx + ")").focus();

                //Simulate Enter after TAB
                $("#ICCID").on("keypress", function(e) {
                if (e.keyCode == 9) {
                var input = $(this);
                var inputVal = input.val();
                setTimeout(function() {
                input.val(inputVal.substring(0,inputVal.length) + "\n");
                      }, 1);
                   }
                });


                }
            });
        });
</script>

The idea of the script is to switch between two particular text areas by pressing TAB button on a keyboard with an initial focus on the first one when web page is loaded and also simulate an Enter button pressing after the TAB action is complited. All other elements on the page have to be ignored for this TAB key press event.

Can anyone help with this?

Answer 1

When you first bind the keydown action I would try:

$inp.bind("keydown", function(e)
{
    var code = (e.keyCode ? e.keyCode : e.which);
    if(code == 9)
    {
        //DO SOMETHING
    }
});

I would also change all your keypress to keydown

Or try reading http://api.jquery.com/keypress/