GTK3输入框实现回车键跳转至下一个输入字段的方法

嘿，这个需求太贴合小键盘操作的场景了，实现起来其实挺直接的——核心就是监听回车键事件，然后手动帮用户切换输入框的焦点就行。我给你分几种常见的技术场景来拆解，你可以按需选用：

如果是纯前端原生开发，用这个方案最通用：

• 先给所有需要处理的数字输入框加一个统一的类名，比如numeric-input，方便批量选中
• 给每个输入框绑定keydown事件，判断是否按下回车键（推荐用event.key === 'Enter'，比keyCode兼容性更好）
• 触发回车时，先阻止默认的表单提交行为（如果输入框在<form>标签内），然后找到下一个输入框并调用focus()方法

// 获取所有目标输入框
const numericInputs = document.querySelectorAll('.numeric-input');

numericInputs.forEach((input, currentIndex) => {
  input.addEventListener('keydown', (e) => {
    // 判断是否按下回车键
    if (e.key === 'Enter') {
      e.preventDefault(); // 阻止表单默认提交（如果存在）
      
      // 验证当前输入的合法性（可选，根据你的需求调整正则）
      const inputValue = input.value.trim();
      if (!/^\d+$/.test(inputValue)) {
        alert('请输入有效的数字！');
        input.value = '';
        input.focus();
        return;
      }

      // 计算下一个输入框的索引，最后一个回车后回到第一个
      const nextIndex = (currentIndex + 1) % numericInputs.length;
      numericInputs[nextIndex].focus();
    }
  });
});

jQuery可以让代码更简洁，适合已有jQuery依赖的项目：

$('.numeric-input').on('keydown', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    
    // 验证输入
    const inputVal = $(this).val().trim();
    if (!/^\d+$/.test(inputVal)) {
      alert('请输入有效数字');
      $(this).val('').focus();
      return;
    }

    // 切换到下一个输入框，没有的话回到第一个
    const $nextInput = $(this).next('.numeric-input');
    if ($nextInput.length) {
      $nextInput.focus();
    } else {
      $('.numeric-input').first().focus();
    }
  }
});

如果是Vue开发，可以结合指令或者直接监听@keydown.enter事件：

<template>
  <div class="input-group">
    <input 
      v-for="(field, idx) in inputFields" 
      :key="idx"
      class="numeric-input"
      type="text"
      @keydown.enter="handleEnter(idx)"
      v-model="field.value"
      inputmode="numeric" <!-- 移动端弹出数字键盘，可选 -->
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputFields: [
        { value: '' },
        { value: '' },
        // 可根据需求添加更多输入框
      ]
    };
  },
  methods: {
    handleEnter(currentIdx) {
      const currentValue = this.inputFields[currentIdx].value.trim();
      // 验证输入
      if (!/^\d+$/.test(currentValue)) {
        alert('请输入有效的数字！');
        // 重置并重新聚焦当前输入框
        this.inputFields[currentIdx].value = '';
        this.$nextTick(() => {
          this.$el.querySelectorAll('.numeric-input')[currentIdx].focus();
        });
        return;
      }

      // 切换到下一个输入框
      const nextIdx = (currentIdx + 1) % this.inputFields.length;
      this.$nextTick(() => {
        this.$el.querySelectorAll('.numeric-input')[nextIdx].focus();
      });
    }
  }
};
</script>

一些额外的小提示：

• 如果输入框是动态生成的（比如从后端获取配置），原生JS要改用事件委托（监听父元素的keydown事件，判断目标元素是否是numeric-input），Vue则确保v-for的key正确即可
• 可以根据业务需求调整跳转逻辑，比如最后一个输入框回车后直接提交表单，而不是回到第一个
• 数字验证的正则可以灵活修改，比如允许小数点、负号：/^-?\d+(\.\d+)?$/

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