入力できるダイアログを表示するスクリプトです。
※ユーザー名には tama と hana が登録されています。
<html> <head> <title>HTML index Webサイト</title> <script type="text/javascript"> <!-- function disp(){ // 入力ダイアログを表示 + 入力内容を user に代入 user = window.prompt("ユーザー名を入力してください", ""); // 入力内容が tama の場合は example_tama.html にジャンプ if(user == 'tama'){ location.href = "example_tama.html"; } // 入力内容が hana の場合は example_hana.html にジャンプ else if(user == 'hana'){ location.href = "example_hana.html"; } // 入力内容が一致しない場合は警告ダイアログを表示 else if(user != "" && user != null){ window.alert(user + 'さんは登録されていません'); } // 空の場合やキャンセルした場合は警告ダイアログを表示 else{ window.alert('キャンセルされました'); } } // --> </script> </head> <body> <p><input type="button" value="入力ダイアログ" onClick="disp()"></p> </body> </html>
<head> 〜 </head> 内にスクリプトを記述しておき、ボタンのクリックでスクリプトを実行します。
上記の例は、登録されているユーザー名(tama と hana)を入力するとそれぞれのページにジャンプし、それ以外の場合は警告ダイアログを表示する仕組みになっています。この処理は一例ですので、アレンジしてお使いください。
ダイアログの「キャンセル」ボタン、または「×」ボタンを押した場合は、 user に null が代入されます。
上記のスクリプトの中で入力ダイアログを表示している部分は、
window.prompt("ユーザー名を入力してください", "")
この部分になります。
あらかじめ入力欄に文字を入れておきたい場合は、
window.prompt("ユーザー名を入力してください", "Uese Name")
このように、User Name の部分に文字を入れます。
上記の例ではボタンを使用していますが、リンクテキストで実行することもできます。
<a href="#" onClick="disp(); return false;">入力ダイアログの表示</a>
表示されるメッセージに改行を入れたいときは、メッセージ内に \n を入れます。
window.prompt("ユーザー名を\n入力してください", "")
※IE5とIE5.5の場合は、半角英数字以外を入力すると正常に処理できないみたいです。
※ソースを見れば登録ユーザー名を確認できてしまうので、パスワード制限のような使い方には向いていません。
青い文字の部分は、必要に応じて書き換えてください。