javascript - 如何覆盖选项卡或用户单击的焦点(焦点)

Question

在我的表单验证中，在提交时，我正在验证表单，并找到未填充的元素并使用此函数进行聚焦:工作正常

switch (tagName) {
  case 'TEXT':
      if (!actualValue) {
          $(target).next('.error').css('display', 'block');
          that.submitIt = false;
          target.select();
      } else {
          $(target).next('.error').css('display', 'none');
          that.submitIt = true;
      }
      break;
  case "SELECT-ONE":
      if (actualValue === 'Select') {
          $(target).next('.error').css('display', 'block');
          that.submitIt = false;
          target.select();
      } else {
          $(target).next('.error').css('display', 'none');
          submitIt = true
      }
      break;
  case "RADIO":
  case "CHECKBOX":
      if (actualValue && actualValue !== 'undefined') {
          $(target).siblings('.error').css('display', 'none');
          that.submitIt = true;
      } else {
          $(target).siblings('.error').css('display', 'block');
          that.submitIt = false;
          target.select();
      }
      break;
}

但问题是，该功能不允许用户移动到下一个(使用选项卡或手动切换到下一个字段)。

如何覆盖选项卡或手动移动(焦点)或箭头键上的焦点？

Live Demo

Answer 1

问题出在 target.select() 行。每次您验证输入字段并且验证失败时(例如，当您尝试离开该字段时)，它都会重新选择同一字段。

编辑:由于您验证焦点，然后重新选择，除了删除 target.select() 之外，我真的没有看到任何其他方法。正如他们所说，鱼与熊掌不可兼得。另一种方法是仅在提交时进行验证。

例如，JQuery 验证插件会在更改和聚焦时将字段标记为无效，但不会选择它。可能是因为这个问题。