Vfrdtyky

Fiddle:
https://jsfiddle.net/pegarm/aq9Laaew/272358/

I'm creating a utility that's supposed to mimic and work like a spreadsheet consisting of a table of elements. I've created jQuery handlers that support navigation between the "cells" of this table using tab, enter, and arrow keys.

Right now my "proof of concept" code looks like this:

$('input.field').keydown(function(event) {

    var

        $this = $(this),

        Row = getRow($this),

        Row_Next = (parseInt(Row) + 1).toString(),

        Row_Prev = (parseInt(Row) - 1).toString(),

        cursorPosition = $this.getCaret();



    switch (event.which) {

        /* Enter */

        case 13:

            event.preventDefault();

            if ($this.hasClass('last') && Row != '18') {

                $this.closest('tbody').find('tr[data-row="' + Row_Next + '"]').find('input[name="' + $this.attr('data-next') + '"]').focus();

            } else if (!$this.hasClass('last')) {

                $this.closest('tr[data-row="' + Row + '"]').find('input[name="' + $this.attr('data-next') + '"]').focus();

            }

            break;

        /* Left */

        case 37:

            if ($this.hasClass('first') && cursorPosition == 0 && Row != '1') {

                $this.closest('tbody').find('tr[data-row="' + Row_Prev + '"]').find('input[name="' + $this.attr('data-prev') + '"]').focus();

            } else if (!$this.hasClass('first') && cursorPosition == 0) {

                $this.closest('tbody').find('tr[data-row="' + Row + '"]').find('input[name="' + $this.attr('data-prev') + '"]').focus();

            }

            break;

        /* Up */

        case 38:

            if (Row != '1') {

                $this.closest('tbody').find('tr[data-row="' + Row_Prev + '"]').find('input[name="' + $this.attr('name') + '"]').focus();

            }

            break;

        /* Right */

        case 39:

            if ($this.hasClass('last') && cursorPosition == $this.val().length && Row != '18') {

                $this.closest('tbody').find('tr[data-row="' + Row_Next + '"]').find('input[name="' + $this.attr('data-next') + '"]').focus();

            } else if (!$this.hasClass('last') && cursorPosition == $this.val().length) {

                $this.closest('tr[data-row="' + Row + '"]').find('input[name="' + $this.attr('data-next') + '"]').focus();

            }

            break;

        /* Down */

        case 40:

            if (Row != '18') {

                $this.closest('tbody').find('tr[data-row="' + Row_Next + '"]').find('input[name="' + $this.attr('name') + '"]').focus();

            }

            break;

    }

});

The issue I'm having is that when the user presses tab to navigate between fields, the page automatically selects the content of the next field, allowing them to start typing and overwriting its values. When the user uses arrow keys to navigate between cells, the content is not highlighted forcing them to delete the contents before tying in new values.

Things I've tried which do not work:

$('input.field').focus(function() {

    $(this).select();

});

...and

$this.closest('tbody').find('tr[data-row="' + Row_Next + '"]').find('input[name="' + $this.attr('name') + '"]').focus().select();

...and

$this.closest('tbody').find('tr[data-row="' + Row_Next + '"]').find('input[name="' + $this.attr('name') + '"]').select().focus();

...and changing the keydown event handler to:

$('input.field').mouseup(function(e) {

    return false;

}).focus(function() {

    $(this).select();

}).keydown(function(event) {...

I'm pulling my hair out. Nothing I do seems to allow the contents of the input field to be selected on focus when the arrow keys are used to focus the field.

Seems to be a timing issue (at least in chrome). When I wrap it in a timeout it appears to have the desired results:

Right */

case 39:

  if ($this.hasClass('last') && cursorPosition == $this.val().length && Row != '18') {

    setTimeout(() => {

      $this.closest('tbody')

        .find('tr[data-row="' + Row_Next + '"]')

        .find('input[name="' + $this.attr('data-next') + '"]')

        .focus()

        .select();

    }, 10);

  } else if (!$this.hasClass('last') && cursorPosition == $this.val().length) {

    setTimeout(() => {

      $this.closest('tr[data-row="' + Row + '"]')

        .find('input[name="' + $this.attr('data-next') + '"]')

        .focus()

        .select();

    }, 10);

  }

  break;

Your Fiddle Forked

Update 1 it appears as I had suspected, the browser needs to continue the event in the input where the cursor is. A better solution is to prevent any default from happening:

Right */

case 39:

  if ($this.hasClass('last') && cursorPosition == $this.val().length && Row != '18') {

    event.preventDefault();

    $this.closest('tbody')

      .find('tr[data-row="' + Row_Next + '"]')

      .find('input[name="' + $this.attr('data-next') + '"]')

      .focus()

      .select();

  } else if (!$this.hasClass('last') && cursorPosition == $this.val().length) {

    event.preventDefault();

    $this.closest('tr[data-row="' + Row + '"]')

        .find('input[name="' + $this.attr('data-next') + '"]')

        .focus()

        .select();

  }

  break;

Second Forked Fiddle