label 要素を用いてトラックバックURLを1クリックで選択状態にする
Tag：[Customize, JavaScript, label, MovableType, TrackbackURL, Usability, XHTML]
Permalink
個別エントリーアーカイブに表示されたトラックバックURLを、ドラッグせずに1クリックで選択する方法は既にスタンダードなカスタマイズとして確立していますが、label 要素を加えてさらに取得しやすくしてみました。label 要素は、それで括られた説明文をクリックした時やアクセスキーを押した時、本来の部分をクリックした時と同じ動作をさせる働きをもっています。
デフォルトテンプレートにおけるトラックバックURL表示のHTMLタグは下記のようになっています。
<h2 id="trackbacks">トラックバック</h2>
<p class="techstuff">このエントリーのトラックバックURL:<br />
<$MTEntryTrackbackLink$></p>このタグでは下のような表示になり、トラックバックURLをコピーする場合、マウスでドラッグする必要があります。
- トラックバック
- このエントリーのトラックバックURL:
- http://www.koikikukan.com/cgi-bin/blog/koikikukan/mt-tb.cgi/1216
このタグに対してURL表示部分を input 要素に変更し、さらに onfocus イベントを加えて1クリックでURL全体が選択できるようにします。
<h2 id="trackbacks">トラックバック</h2>
<p class="techstuff">このエントリーのトラックバックURL:<br />
<input tabindex="1" accesskey="x" name="tb_url" value="<$MTEntryTrackbackLink$>" readonly="readonly" onfocus="this.select()" /></p>ここまでが従来のカスタマイズで、テキストエリアのURLを1クリックで選択状態にすることができます。ここでは省略していますがIEのみ有効なコピーボタンをつけるというカスタマイズもあります。
- トラックバック
- このエントリーのトラックバックURL:
input 要素には name 属性が必要です。また tabindex 属性と accesskey 属性の付与が推奨されています。
ここからさらに input 要素に任意の id 属性を追加し、その id 属性を指定する label 要素で説明文「このエントリーのトラックバックURL:」を括ります。
<h2 id="trackbacks">トラックバック</h2>
<p class="techstuff"><label for="tb_url">このエントリーのトラックバックURL:</label><br />
<input tabindex="1" accesskey="x" name="tb_url" id="tb_url" value="<$MTEntryTrackbackLink$>" readonly="readonly" onfocus="this.select()" /></p>これで「このエントリーのトラックバックURL:」の部分をクリックしても選択状態にできるようになります。
- トラックバック
URLの周囲に他の説明文を加えている場合はそこに label 属性を付与することでさらにマウスでURLを狙う精度を低くすることができます。
label 要素に accesskey 属性を付与することで、ALT キー+「accesskey属性で指定した値」で選択することもできます。Movable Type ではデフォルトテンプレート・メインページの検索部分にこのテクニックを用いていますので、そちらも参考にされると良いと思います。
2005.06.17 追記
typo がありました（誤：lable→正：label）ので修正しました。すいません。
