使用 jQuery 在焦點上突出顯示輸入字段的內容

Question

小提琴： 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;

你的小提琴分叉了

更新 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;

第二個分叉小提琴