防止Firefox中的默认选项卡行为答案

【问题标题】：Prevent default tabbing behavior in firefox防止Firefox中的默认选项卡行为
【发布时间】：2013-03-05 11:01:43
【问题描述】：

我几乎没有要更新的输入字段。当按 Tab 键时，只有在当前字段的某些验证成功后，我才需要将焦点移动到下一个字段。如果失败，则留在同一字段中。

function fieldFocus(e, nxFld){
  var key;
  if (window.event) key   = e.keyCode;
  else if (e.which) key = e.which;

  if (!e.shiftKey && key === 9) {
    e.stopPropagation();
    e.preventDefault();

   // do validate {}
    if (success)
     $(nxFld).focus();  //set the focus to the next fld
    else
     //  remain in the same field   
  }
  return false;
}

$(currFld).bind("keydown",function(e) {
   return fieldFocus(e, nxtFld); 
});

这在 IE 和 Chrome 中运行良好。但在 Firefox 中，默认焦点总是在验证之前触发。请帮助我防止Firefox的默认行为。

---- 与@Faizul Hasan 的代码相关的编辑代码----

<script>
  function fieldFocus(e, obj){
    var key;
    if (window.event) key   = e.keyCode;
    else if (e.which) key = e.which;

    if (!e.shiftKey && key === 9) {
      // do validate
      if (0 !== obj.value.length){
        var answer = confirm('Are you sure?')
        if(answer)
          return true;
        else{
          // need to stop cursor focus to the next field
          e.stopPropagation();
          e.preventDefault();
        }
      }
      else{
        e.stopPropagation();
        e.preventDefault();
      }
    }
    return false;
  }
</script>

这是我真正遇到问题的地方，在用户确认焦点移动到 Firefox 中的下一个字段之前。但在 IE 和 Chrome 中它工作正常。

【问题讨论】：

你没有尝试阻止默认然后运行验证然后手动关注下一个字段吗？
TO哪个事件触发了fieldFocus函数？？是否可以使用您的代码创建 jsFiddle 您触发该功能的事件？
@Faizul Hasan，我已经更新了代码示例。抱歉，我无法将其更新到 jsFiddle。希望你能理解我的要求..
我认为您不必通过下一个字段。只需尝试我发布的答案即可。它工作正常...希望对您有所帮助..

标签： javascript jquery firefox focus

【解决方案1】：

试试这样的。这在 Chrome 和 Firefox 中也可以正常工作。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script>
      function fieldFocus(e, obj){
        var key;
        if (window.event) key   = e.keyCode;
        else if (e.which) key = e.which;

        if (!e.shiftKey && key === 9) {
          // do validate
          if (0 !== obj.value.length){
            return true;
          }
          else{
            e.stopPropagation();
            e.preventDefault();
          }
        }
        return false;
      }
    </script>
</head>
<body>
  <input type="text" id="first-field"  onkeydown="fieldFocus(event, this);" />
  <input type="text" id="second-field" onkeydown="fieldFocus(event, this);" />
  <input type="text" id="third-field" onkeydown="fieldFocus(event, this);" />
  <input type="text" id="fourth-field" onkeydown="fieldFocus(event, this);" />
  <input type="text" id="fifth-field" onkeydown="fieldFocus(event, this);" />
  <input type="text" id="sixth-field" onkeydown="fieldFocus(event, this);" />
</body>

请注意，这是供您参考的示例代码，因为您的代码中未提及您触发函数的方式。您可以使用 jQuery 轻松调用 keydown 事件的函数，而不是像 onkeydown = functionName(<params>) 这样的所有输入元素调用它。希望这会对你有所帮助。

更新：相同的代码，但集成了 jQuery

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="jquery-1.8.2.js"></script>
    <script>
      $(document).ready(function(){
        $('.input-element').each(function(index, value){
          $(value).keydown(function(event){
            fieldFocus(event, this);
          });
        });

        function fieldFocus(e, obj){
          var key;
          if (window.event) key   = e.keyCode;
          else if (e.which) key = e.which;

          if (!e.shiftKey && key === 9) {
            // do validate                   
            if (0 !== obj.value.length){
              return true;
            }
            else{
              e.stopPropagation();
              e.preventDefault();
            }
           }
          return false;
        }
      });
    </script>
    </head>
    <body>
      <input type="text" id="first-field" class="input-element"  />
      <input type="text" id="second-field" class="input-element" />
      <input type="text" id="third-field" class="input-element" />
      <input type="text" id="fourth-field" class="input-element" />
      <input type="text" id="fifth-field" class="input-element" />
      <input type="text" id="sixth-field" class="input-element" />
    </body>
</html>

【讨论】：

感谢您的回复。我确实尝试了您的代码，但无法得到我想要的。就我而言，验证部分并没有那么简单。有时它会通过对话框询问用户确认以进行验证。特别是在那个时候我需要处理焦点。检查我通过修改您的代码添加的代码。

【解决方案2】：

经过几次锻炼后，我在 Firefox 中发现了导致问题的原因。这是“按键”事件。

当将 preventdefault() 应用于 keydown 时，'keypress' 事件仍会触发，但仅在 Firefox 中。

所以我如下处理了“按键”并解决了我的问题。

希望这对其他人有帮助。

var browsFix = false;
function fieldFocus(e, nxFld){
  var key;
  if (window.event) key   = e.keyCode;
  else if (e.which) key = e.which;

  if (!e.shiftKey && key === 9) {
    browsFix = true;  
    e.stopPropagation();
    e.preventDefault();

    // do validate {}
    if (success)
      $(nxFld).focus();  //set the focus to the next fld
    else
    //  remain in the same field   
  }
  return false;
}

$(currFld).bind("keydown",function(e) {
  browsFix = false;
  return fieldFocus(e, nxtFld); 
});

$(currFld).bind("keypress",function(e) {
  if (browsFix)
    return false; 
});

【讨论】：