- 2008-10-10 (金) 10:53
- MovableType
- tabindexを変数でゴリゴリ
えーとですね。Another HTML-lint gatewayのお世話になっている方は、多いと思うのですが、
0: line 222: (<input type="text"> には tabindex 属性を指定するようにしましょう。) → 解説 178
という一文が気になっている方はいないでしょうか？
サイドバーの検索フォーム・ウィジェットは、それ以前にどの様なフォームの入力が発生するか、分からないために、tabindex属性が省略されています。
ウィジェットなので順番が入れ替わりますし、ブログ記事アーカイブではコメントフォームが中に入るために、その影響も考えなくてはならないからです。
これを変数機能を使って解消してみましょう。
まずは、最初の方で変数をセットしましょう。「HTMLヘッダー」テンプレートモジュール内に、
<$MTSetVar name="tabindex_no" value="0"$>
を記述します。変数名は別にこれでなくてはいけない訳ではないです。
次にタブインデックスを設定するべき要素が書かれたテンプレートを探します。
「コメント」モジュール・「検索」ウィジェットなどです。他にも必要なテンプレートが存在するかもしれません。
<input type="text" id="search" class="ti" name="search" value="<$mt:SearchString$>" />
このような「<input type="text">」部分などに対して、先ほどの変数をインクリメントした上で、その変数名をタブインデックス値として設定します。
<$MTSetVar name="tabindex_no" op="++"$><input type="text" id="search" class="ti" name="search" value="<$mt:SearchString$>" tabindex="<$MTVar name="tabindex_no"$>" />
同様に「コメント」モジュール内のフォームの入力部分に対しても、コードを追加します。
テンプレートを再構築すると、各入力部分に対して、出現順にタブインデックスが振られるようになります。
重要ではないアクセスキーを、連番で振るようなケース（それが正しいことかは疑問ですが）にも使えますね。
- Newer >: movabletype.orgのタグマニュアル
- < Older: 迷路：アマゾンアイテムのテスト
ping a Trackback
- TrackBack URL for this entry.(1)
スクリプトの読み込みが完了していません。
メールフォーム（Javascriptを使用していません）や、
Twitter経由のCommentでもReplyいたします。ただし返信はブログのコメントとして行う事もあります。