如何实现contentEditable的td输入满3位自动切换焦点？

需求说明 #

使用contentEditable="true"的<td>元素作为数字输入字段，每个字段最多允许输入3位数字，要求第一个字段输满3位后自动将焦点切换到第二个字段。

原代码 #

<div class="content">
<div class="content mb-0 mt-3">
<div class="row mb-0">
<div id="add-product">
    <table cellpadding="10" cellspacing="1">
        <tbody>
            <tr>
                <th><h6 class="font-14"><strong>Number</strong></h6></th>
                <th><h6 class="font-14"><strong>Count</strong></h6></th>
            </tr>
            <tr>
        <td contentEditable="true" inputmode="numeric" data-id="lot_number_3" data-length="3" class="test"><h3 class="color-green-dark mb-0"></h3></td>
        <td contentEditable="true" inputmode="numeric" data-id="lot_count_3" data-length="3" class="test"><h3 class="color-red-dark mb-0">1</h3></td>
            </tr>
        </tbody>
    </table>

</div>

</div>
</div>

</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$('td[contentEditable="true"]').on("keydown", e => {
  // define allowed keys
  const allow = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Tab', 'Backspace']
  // get pressed key
  const k = e.key
  if (allow.includes(k)) {
    // get the value before this keydown
    const val = e.target.textContent

    // determine the limit according to your logic
    const limit = Number(e.target.dataset['length']);

    if (val.length == limit && 'Tab' != k && 'Backspace' != k) {
      // pressing this key would put the value over the limit
      e.preventDefault()
      console.log('deny: ' + k, val, limit)
    } else
      console.log('allow: ' + k, val, limit)

  } else {
    // key not allowed
    e.preventDefault()
    console.log('deny: ' + k)
  }

})
</script>

修改后的代码（实现自动切换焦点） #

<div class="content">
<div class="content mb-0 mt-3">
<div class="row mb-0">
<div id="add-product">
    <table cellpadding="10" cellspacing="1">
        <tbody>
            <tr>
                <th><h6 class="font-14"><strong>Number</strong></h6></th>
                <th><h6 class="font-14"><strong>Count</strong></h6></th>
            </tr>
            <tr>
        <td contentEditable="true" inputmode="numeric" data-id="lot_number_3" data-length="3" class="test"><h3 class="color-green-dark mb-0"></h3></td>
        <td contentEditable="true" inputmode="numeric" data-id="lot_count_3" data-length="3" class="test"><h3 class="color-red-dark mb-0">1</h3></td>
            </tr>
        </tbody>
    </table>

</div>

</div>
</div>

</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
// 辅助函数：将光标定位到contentEditable元素内容末尾
function placeCursorAtEnd(el) {
    el.focus();
    const range = document.createRange();
    const selection = window.getSelection();
    range.selectNodeContents(el);
    range.collapse(false);
    selection.removeAllRanges();
    selection.addRange(range);
}

$('td[contentEditable="true"]').on("keydown", e => {
  const allow = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Tab', 'Backspace']
  const k = e.key
  if (allow.includes(k)) {
    const val = e.target.textContent
    const limit = Number(e.target.dataset['length']);

    if (val.length == limit && 'Tab' != k && 'Backspace' != k) {
      e.preventDefault()
      // 找到下一个可编辑的td
      const nextTd = $(e.target).next('td[contentEditable="true"]');
      if (nextTd.length) {
          placeCursorAtEnd(nextTd[0]);
      }
    }

  } else {
    e.preventDefault()
  }

})
</script>

关键改动说明 #

1. 添加placeCursorAtEnd辅助函数：确保切换焦点后光标定位在内容末尾，提升输入体验
2. 在阻止超出长度输入的逻辑中，增加查找下一个可编辑<td>的代码，找到后调用辅助函数设置焦点
3. 移除冗余的控制台日志，简化代码

内容的提问来源于stack exchange，提问作者nightowl