[JavaScript]リンクのURLクエリをPOSTで送信する

先日、検索 → 一覧 → 詳細 という画面に対して、

1. 一覧から詳細画面へはリンクをつかって遷移すること
2. 詳細画面から一覧画面へは「パンくず」リンクを利用して戻れるようにすること
3. 一覧画面は検索したときの条件で絞り込まれた一覧が表示されること
4. 詳細画面へのＵＲＬに検索条件のURLクエリをつけず、詳細データへのIDのみをクエリにつけること
5. Cookie（セッション）利用不可

という依頼を受けました。
SEO対策のためにURLに余計なクエリをつけたくないけど、パンくずのフローは辿ってきたフローをちゃんと戻れるようにしたいというのが趣旨でした。
そこでHTMLを生成するときには、ID、検索条件ともにリンクのURLにクエリとして追加しておき、Javascriptを利用して、URLからクエリの一部を抜き取り、リンクをクリックしたときに、それらがPOSTされるようにしました。
書いておけば、後々役に立つかなと思ったので書いてみることにしました。
下がそのサンプルになります。
どちらも同じＵＲＬを指定していますが、開く画面は別になるようになっています。

リンクその１
リンクその２

この処理の手順はこんな感じになります。

1. リンク要素を取得する
2. リンクのＵＲＬをアドレスとクエリにわける
3. 動的にフォームを生成し、生成したフォームにクエリをhiddenとして追加していく
4. リンクのhref属性の書き替え
5. リンククリック時に生成したフォームがsubmitされるようにする

[JavaScript]ブラウザ上でペーストを禁止する

会員登録フォームなどで、メールアドレスを入力させる場合、確認のために同じメールアドレスを2度入力させるのをよく見かけます。

そのような場合、「確認用はコピー＆ペーストではなく直接入力でお願いいたします。」などと注意書きが入れてあったりするのですが、こういうった注意書きがある場合でも、実際にはコピー＆ペーストできてしまうフォームがあったりします。

そこで、こういったフォームでJavaScriptを利用してコピー＆ペースト（Ctrl-c & Ctrl-s）を防止する方法を紹介します。

コピー禁止フォーム：

ペースト禁止フォーム：

[JavaScript]テキストエリアにtitleタグを使って入力例を表示する

JavaScriptを利用して登録フォームのテキストボックスにtitleタグに指定した文字列を入力例として表示する方法を記します。

この処理は

1. フォーカスが外れたとき
   入力した文字列がないまたは、入力した文字列がtitleタグの入力内容と同じ場合、入力例を表示する
2. フォーカスされている場合
   入力した文字列がtitleタグの入力内容と異なる場合、入力した文字列を通常のフォント色で表示する

という方法で実現します。

実際の動作は下のようになります。

振替休日を算出するJavaScriptカレンダー

YUIのJavaScriptカレンダーを日本語化＆ポップアップ対応＆祝日も表示 - Yahho Calendar [ゼロと無限の間に]というサイトでGoogleカレンダーの祝日情報を取得して、カレンダーポップアップを表示するサンプルが公開されていたのですが、何故かGoogleカレンダーの祝日情報は元旦の振替休日（2012年）しか登録されていないので、振替休日をJavaScript内で算出するように修正してみました。

ここをクリックするとカレンダーが表示されます。

年 月の祝日を （何も入力しないと今年の祝日を表示します。）

振替休日と国民の休日の算出方法でお悩みの方がいましたら、続きをご覧ください。

テーブルの一部の列だけソートする

先日、仕事でちょっと変わったJavaScriptのインタフェースを作成したので紹介します。
応募者を面接の枠に割る振ることで、面接時間の設定をするというものだったのですが、

1. 応募者を面接枠の中にドラッグ＆ドロップすることで、割振りをできるようにしたい。
2. 割り振った応募者を面接表内をドラッグすることで、順番を入れかえられるようにしたい。
3. キャンセル（応募者を面接枠から外す）ができるようにしたい。

という要望がありました。

下にあるのがこの２つの要望を考慮して作成したプロトタイプになります。
一度ドラッグした応募者は、名前をダブルクリックすることで元に戻すことができます。

このプログラムは以下の２つの部分に分けることができます。
それぞれの詳しい説明を下記に記します。

1. 一覧（table)から特定の行の情報をドラッグ＆ドロップで移動させる。
2. 一覧（table)内の特定の列のみドラッグによるソートができるようにする。