subnetipv4.com页面移动端keypress事件不触发技术问询

嘿，我之前做IP输入组件的时候也踩过这个坑！移动端浏览器的虚拟键盘对onkeypress事件的支持确实拉胯，很多时候特殊字符的按键根本触发不了它，换成keydown事件就靠谱多了。

先给你调整后的代码，亲测在移动端Chrome、Safari都能正常工作：

// 按下.或/时跳转到下一个输入框的函数
function jumpdot(event) {
  // 先阻止默认行为，避免把.或/输入到当前输入框里
  event.preventDefault();
  
  // 兼容不同浏览器的按键获取方式
  const pressedKey = event.key || event.keyCode;
  const currentInput = event.target;

  // 判断是否是我们需要的按键：.（句点）或/（斜杠）
  // 同时兼容key字符串和keyCode数值（覆盖不同浏览器的情况）
  const isTargetKey = ['/', '.', 191, 190, 110].includes(pressedKey);
  
  if (isTargetKey) {
    // 获取当前输入框的下一个同级输入框（假设你的IP输入框是同级排列的）
    const nextInput = currentInput.nextElementSibling;
    // 确认下一个元素是输入框再聚焦，避免报错
    if (nextInput && nextInput.tagName === 'INPUT') {
      nextInput.focus();
    }
  }
}

然后记得把原来的事件绑定从onkeypress改成keydown，推荐用addEventListener来绑定，比直接写在HTML里更灵活：

// 给所有IP输入框绑定跳转事件
document.querySelectorAll('.ip-input').forEach(input => {
  input.addEventListener('keydown', jumpdot);
});

为什么这么改？ #

• keydown事件在移动端虚拟键盘上的兼容性远好于keypress，几乎所有按键操作都会触发它
• 加入了按键的兼容判断，同时支持event.key（现代浏览器标准）和event.keyCode（旧浏览器）
• 阻止默认行为可以避免把.或/留在当前输入框里，让跳转更流畅
• 额外判断下一个元素是否为INPUT，防止出现意外报错

你可以在移动端浏览器里测一下，应该就能正常跳转啦！

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