防止Firefox中的默認Tab鍵行為

Question

我有幾個輸入字段需要更新。當按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中它的工作正常。

Answer 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>

Answer 2

經過一些訓練后，我發現了一些導致問題的Firefox。 這是'按鍵'事件。

將keysdefault（）應用於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; 
});

防止Firefox中的默認Tab鍵行為

問題描述

2 個解決方案

解決方案1
1 2013-03-05 11:38:06

解決方案2
0 已采納 2013-03-19 04:56:23

防止Firefox中的默認Tab鍵行為

問題描述

2 個解決方案

解決方案1 1 2013-03-05 11:38:06

解決方案2 0 已采納 2013-03-19 04:56:23

解決方案1
1 2013-03-05 11:38:06

解決方案2
0 已采納 2013-03-19 04:56:23