promptによるインプットボックスの使い方

HOME
更新日:2013.10.04
HOMEJavaScript入門 > promptで名前を表示する

promptで名前を表示する

あるサイトを訪れた時、インプットボックスが現れて名前の入力が求められたという経験はありませんか? 入力すると自分の名前がサイト内に表示されたりしますね。 ここではそんなインプットボックスを出す方法について解説してみます。

インプットボックスはうちのサイトのクロスワードとか、 パズル全般のパスワードを表示するのに用いています。 色々と使い道があるので、是非覚えて下さい。

インプットボックスを出す

インプットボックスを出すには、promptという命令を使います。 promptを使って名前を入力してもらい、 入力文字をページ上に表示するサンプルを作ってみることにしましょう。

HTMLのbody内に以下のように記入して下さい。

<script>

var str;  //入力文字を入れる変数

//インプットボックスの表示&入力文字をstrに代入
str = prompt("お名前を教えて下さい。","");

//strが空の場合の処理
if (str == "") str = "名無しの権兵衛";

//名前を表示する
document.write("<center>");
document.write("ようこそ、<b>" + str + "</b>さん!");
document.write("</center>");

</script>

サンプル(別窓)

上から順に解説してみましょう。 まず変数strを宣言します。 これはビジターが入力してくれた文字を入れるための変数です。

次にprompt()でインプットボックスを出します。 括弧内は2つの区分があります。 最初の部分は質問文を記入し、後ろの部分は入力枠に表示する文字を指定します。 今回は入力枠に何も表示する必要が無いので、空にしています。 文字列ですからクォーテーションで囲み、2つの区分の間は半角コンマで区切ります。

変数 = prompt("質問文","最初に表示する文字");
インプットボックスを出します。
カッコ内の最初の項目は質問文、2番目の項目は初期表示文字を指定します。
ユーザーの入力した文字列は、変数に代入されます。

次に、ビジターが何も入力せずにOKを押した場合の処理を書きます。 if文でstrを調べ、空であれば「名無しの権兵衛」を代わりに代入します。

最後にdocument.writeで歓迎文を書き出します。 上のサンプルでは3回に分けて書いていますが、 これは画面の横幅の関係で1行で書けなかったためです。 別に1つにまとめて書いてくださって構いません。

キャンセルを押された時の処理

さて、上記のソースのままだと、 インプットボックス上でキャンセルを押された場合に不具合が出ます。 試しにやってみると分かりますが、nullと表示されると思います。

このnullというのは、データが無い状態を表します。 OKを押した場合は、空ですが一応文字列データ""が代入されます。 しかしキャンセルを押された時はそのデータすら無い状態なのです。

ということで、上記ソースのif文の後に、もう1つチェック文を付け加えましょう。

if (str == "") str = "名無しの権兵衛";
if (str == null) str = "名無しの権兵衛";

以下のようにまとめて書くことも可能です。‘||’はor(どちらか)という意味です。

if ( (str == "") || (str == null) ) str = "名無しの権兵衛";

サンプル(別窓)

これでキャンセルを押されても大丈夫です。 promptでキャンセルを押された場合はnullという状態になることを覚えておきましょう。