[ Javascript ] alert 関数のテキストを改行させる

Pocket

Javascript の alert 関数によって OK ボタンのみのメッセージダイアログを出力することができますが、ここでは出力するテキストを改行させるサンプルを掲載しています。

スポンサーリンク

サンプルスクリプト

alert 関数で出力するダイアログのテキストを改行させるサンプルスクリプトになります。alert 関数に加え使用頻度の高い OK とキャンセルボタンを持つ確認ダイアログを cofirm 関数で出力させています。

<html>
  <head>
    <title>Javascript でメッセージボックス</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <!-- メッセージ出力 -->
    <input type="button" value="1行メッセージ" onclick="alert('ボタンがクリックされた');" />
    <!-- メッセージに改行をいれる -->
    <input type="button" value="改行メッセージ" onclick="alert('ボタンがクリックされた\n改行します')" />
    <!-- 確認ダイアログ -->
    <form method="post" action="test.html">
      <input type="submit" value="確認メッセージ" onclick="return confirm('確認ダイアログ');" />
    </form>
  </body>
</html>
概要

alert 関数を使用することで、OK ボタンのみのダイアログを出力することができます。出力するテキストメッセージの途中で改行を入れるには改行をあらわす ‘ \n ‘ を入れます。alert は OK ボタンのみのダイアログが出力されますが、confirm 関数を使用することで OK とキャンセルボタンの2つを持つ確認ダイアログを出力することができます。

サンプルスクリプトでは、OK ボタンをクリックすると test.html に post メソッドでリクエストをしますが、キャンセルボタンをクリックすると何の処理も行われません。

ユーザーにテキストを入力させるダイアログ

あまり使われない(私が見たことがないというだけです)と思いますが、window.prompt 関数によってユーザーにテキストを入力させた上で OK、キャンセルを選択させることができるダイアログを出力することができます。以下のように使用することができます。

var name = window.prompt("あなたのお名前なんですか?");

// null の場合
if(name === null) {
    alert("キャンセルボタンまたは×ボタンがクリックされました。");
} else if (name == "佐々木小次郎") {
    alert("こんにちは、" + name + " さん。かっこいいですね。");
} else {
    alert("こんにちは、" + name + " さん");
}

本サンプルのような実装でユーザー認証のようなことをやるのは無意味(認証になっていない)です。 実際にやろうとしていた人がいたので、念のための記載です。prompt 使ってどうしてもユーザー認証したい場合は、入力テキストをサーバへ送り、サーバー側で認証します。

Javascript はユーザに見えていることを、たまに忘れる人が私を含めいます

参考

 

スポンサーリンク


Pocket

Leave a Comment

Your email address will not be published. Required fields are marked *