4

更新する入力フィールドがほとんどありません。タブキーを押すと、現在のフィールドの検証が成功した後にのみ、フォーカスを次のフィールドに移動する必要があります。失敗した場合は、同じフィールドに残ります。

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 では問題なく動作します。

4

2 に答える 2

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>
于 2013-03-05T11:38:06.460 に答える
0

いくつかのワークアウトの後、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; 
});
于 2013-03-19T04:56:23.967 に答える