javascript - 使用 jQuery 突出显示焦点输入字段的内容

Question

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

我正在创建一个实用程序，它应该模仿由元素表组成的电子表格并像电子表格一样工作。我创建了 jQuery 处理程序，支持使用 Tab、Enter 和箭头键在该表的“单元格”之间导航。

现在我的“概念验证”代码如下所示:

$('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;
    }
});

我遇到的问题是，当用户按 Tab 键在字段之间导航时，页面会自动选择下一个字段的内容，允许他们开始键入并覆盖其值。当用户使用箭头键在单元格之间导航时，内容不会突出显示，迫使他们在输入新值之前删除内容。

我尝试过但不起作用的方法:

$('input.field').focus(function() {
    $(this).select();
});

...和

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

...和

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

...并将 keydown 事件处理程序更改为:

$('input.field').mouseup(function(e) {
    return false;
}).focus(function() {
    $(this).select();
}).keydown(function(event) {...

我正在拔头发。当使用箭头键聚焦字段时，我所做的任何事情似乎都不允许在焦点上选择输入字段的内容。

Answer 1

似乎是一个时间问题(至少在 chrome 中)。当我将它包装在超时时，它似乎得到了预期的结果:

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

更新 1 正如我所怀疑的那样，浏览器需要在光标所在的输入中继续事件。更好的解决方案是防止发生任何违约:

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