防止在Firefox中默認的Tab鍵行爲

我有很少的輸入字段需要更新。當按Tab鍵時，我需要將焦點移動到下一個字段，只有在對當前字段進行一些驗證成功之後。如果失敗，則保持在同一個字段中。防止在Firefox中默認的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哈桑的代碼----

<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中工作正常。

來源

2013-03-05 idsTech

要觸發哪個事件的fieldFocus函數？是否可以用你的代碼創建jsFiddle來觸發該函數？ – 2013-03-05 11:13:52

@Faizul哈桑，我已經更新了代碼示例..對不起，我不能更新它到jsFiddle。希望你能理解我的要求.. – idsTech 2013-03-05 11:36:46

我不認爲你必須通過下一個領域。只需嘗試我已發佈的答案。它工作正常...希望這會幫助你.. – 2013-03-05 11:41:19

我發現這會導致問題火狐的東西很少鍛鍊後。這是'按鍵'事件。

當將preventdefault（）應用於keydown但只在Firefox中時，'keypress'事件仍然會觸發。

所以我處理了'按鍵'如下，並解決了我的問題。

希望這可以幫助很多人。

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; 
});

來源

2013-03-19 04:56:23 idsTech

嘗試這樣的事情。這也適用於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輕鬆調用事件的函數，而不是像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>

來源

2013-03-05 11:38:06

謝謝你的迴應。我確實嘗試了你的代碼，但沒有得到我想要的。在我的情況下，驗證部分並不那麼簡單。有時它會通過一個對話框詢問用戶確認來驗證。特別是在那個時候，我需要處理重點。檢查我通過修改代碼添加的代碼。 – idsTech 2013-03-06 04:12:27

防止在Firefox中默認的Tab鍵行爲

回答

相關問題