CODEWITHSUNDEEP
javascriptjqueryfirefoxfocus
idsTech
idsTech

Reputation: 147

Prevent default tabbing behavior in firefox

I have few input fields to update.When press tab key I need move focus to the next field only after success of some validation of the current field. If fails then remain in the same field.

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

This works fine in IE and Chrome. But in firefox the default focus always fires before the validation. Please help me on this to prevent that default behavior of the firefox.

---- Edited Code related to @Faizul Hasan's code ----

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

This is where Im getting the real problem, before user confirms the focus moves to next field in firefox. But in IE and Chrome its working fine.

Upvotes: 4

Views: 2229

Answers (2)

idsTech
idsTech

Reputation: 147

After few workouts I found something with the Firefox which causes the problem. It is the 'keypress' event.

The 'keypress' event still fires when apply preventdefault() to keydown but only in Firefox.

So I handled the 'keypress' as below and solved my problem.

Hope this will help many others.

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

Upvotes: 0

Faizul Hasan
Faizul Hasan

Reputation: 623

Try something like this. This works fine in Chrome and Firefox too. 

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

Please note this is a sample code for your reference since the way you fire the function is not mentioned in your code. You can use jQuery to easily call the function for keydown event instead of calling it for all input element like onkeydown = functionName(<params>). Hope this would help you.

Updated: Same code but jQuery integrated

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

Upvotes: 1

Related Questions