Fomantic UI の Form ValidationでonFailureでのfocus移動は、注意が必要

keyboardShortcuts が有効の時、onFailure のcallback内で、focus移動は、問題が起こる場合があります。

validateエラーがあった時に、最初のエラーになった入力項目にfocus移動をする、というのは、普通によくある動作と思います。

その時に、以下のように直にfocus移動してしまうと、その後submitボタンが効かなくなる場合があります。 具体的には、ある入力項目にフォーカスがある時、Enterキーでformのsubmitを発生させて、validateエラーが発生して、onFailureが呼ばれた時に、focus()を実行して別の入力項目に移動した場合です。

  onFailure: function(erros, field) {
    var errorFields = $('.field.error input,.field.error select', this);
    errorFields.first().focus();
    return false;
  },

これは、Fomantic UIで、Enterキーを押しっぱなしにした場合、ブラウザがsubmitを複数回呼び出すのを防御するため、キー押し中という状態を保持する変数があるんですが、focusで移動してしまうと、その変数をクリアできなくなり、キー押し中と判定されたままとなり、submitボタンが効かなくなるようです。

うまいこと、Fomantic UI側の修正方法がひらめけば、Pull Requestしたいんですが、ひらめかない。

とりあえず、利用者側でこの現象を回避するには、setTimeoutを使ってfocus移動のタイミングをずらしてあげるというのがよさそうです。

  onFailure: function(erros, field) {
    var errorFields = $('.field.error input,.field.error select', this);
    setTimeout(function(){
      errorFields.first().focus();
    }, 100);
    return false;
  },

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください