web-dev-qa-db-ja.com

JavaScript-Prompt（）の複数行のテキストボックス？

とにかくPromptのテキストボックス/入力ボックスを複数行にする方法はありますか？

javascriptprompt
10
dpp

いいえ、ブラウザはPrompt()の単一行入力のみを許可します。ただし、 jQuery Alert Dialogs ライブラリを簡単に変更するだけで、そこで複数行の入力を取得できます。 _jquery.alerts.js_を取り、_<input type="text" size="30" id="popup_Prompt" />_を探し、それを_<textarea rows="5" cols="30" id="popup_Prompt"></textarea>_に置き換えます。これは、jPrompt()を呼び出すときに複数行の入力フィールドを表示するために行う必要があります。

編集：Mulletfingers999がコメントで指摘しているように、jQueryアラートダイアログは非推奨になり、 jQuery UIダイアログ になりました。ここで「モーダル」ダイアログを表示することもできますが、そのダイアログには任意のコンテンツを含めることができます。つまり、複数行の入力が必要な場合は_<textarea>_タグを使用できます。

8
Wladimir Palant

二重引用符で囲まれた\ nを使用します（ "\ n"）

Prompt("This\nis\nmultiline");
2
Alex

最近のほとんどすべてのユーザー向けWebアプリケーションでは、alert()やPrompt()のような不格好な古いダイアログの使用を避けたいと思うでしょう。使用しているほとんどすべてのライブラリには、はるかに良い答えがあるはずです。他の人が言っているように、jqueryは問題ありません。より巧妙なインターフェースを設計することにより、モダリティの必要性をどのように排除できるかを考えるのも良いでしょう。

「興味深いことに」、FirefoxではすでにXULを使用しており、（基盤となるOSの「共通ダイアログ」に依存する代わりに）それに基づいて多くのユーザーインターフェイスを再発明しています。 / source/toolkit/components/prompts/content/tabprompts.xml にモーダルダイアログのテンプレートがあります：

_<vbox anonid="infoContainer" align="center" pack="center" flex="1">
    <description anonid="info.title" class="info.title" hidden="true" />
    <description anonid="info.body" class="info.body"/>
</vbox>

<row anonid="loginContainer" hidden="true" align="center">
    <label anonid="loginLabel" value="&editfield0.label;" control="loginTextbox"/>
    <textbox anonid="loginTextbox"/>
</row>

<row anonid="password1Container" hidden="true" align="center">
    <label anonid="password1Label" value="&editfield1.label;" control="password1Textbox"/>
    <textbox anonid="password1Textbox" type="password"/>
</row>

<row anonid="checkboxContainer" hidden="true">
    <spacer/>
    <checkbox anonid="checkbox"/>
</row>
_

彼らがしていることは、彼らが必要としないUIの要素を隠すことです。 Promptを呼び出す場合、ユーザー名フィールドを再利用し、パスワードとチェックボックスの要素を非表示にします。これが / source/toolkit/components/prompts/src/CommonDialog.jsm＃52 で発生していることがわかります。

_case "Prompt":
  this.numButtons = 2;
  this.iconClass  = ["question-icon"];
  this.soundID    = Ci.nsISound.EVENT_Prompt_DIALOG_OPEN;
  this.initTextbox("login", this.args.value);
  // Clear the label, since this isn't really a username Prompt.
  this.ui.loginLabel.setAttribute("value", "");
  break;
_

それは多かれ少なかれHTMLなので、唯一の問題は、非標準タグ_<textbox>_がユーザーインターフェイスにとって何を意味するかということです。 XULコントロールのドキュメントには、これは1行のエントリのみであることが記載されています。詳細については、_<textarea>_が必要です。

https://developer.mozilla.org/en/XUL_controls

GTKの上にChromiumの実装を見るのも「楽しい」と思いました。 WebKitの遠回りのラッパーを少し掘り下げた後、私はなんとか chromium/src/chrome/browser/ui/gtk/js_modal_dialog_gtk.cc 、特にこの部分を見つけることができました：

_// Adjust content area as needed.  Set up the Prompt text entry or
// suppression check box.
if (ui::MessageBoxFlags::kIsJavascriptPrompt == dialog_->dialog_flags()) {
  GtkWidget* content_area =
      gtk_dialog_get_content_area(GTK_DIALOG(gtk_dialog_));
  GtkWidget* text_box = gtk_entry_new();
  gtk_entry_set_text(GTK_ENTRY(text_box),
      UTF16ToUTF8(dialog_->default_Prompt_text()).c_str());
  gtk_box_pack_start(GTK_BOX(content_area), text_box, TRUE, TRUE, 0);
  g_object_set_data(G_OBJECT(gtk_dialog_), kPromptTextId, text_box);
  gtk_entry_set_activates_default(GTK_ENTRY(text_box), TRUE);
}
_

Text_boxはgtk_entry_new()で作成され、 GTKドキュメント はGtkEntryが 「1行のテキスト入力フィールド」。複数行のエントリの場合、GtkTextViewを使用する必要があります。

http://developer.gnome.org/gtk/2.24/GtkTextView.html

だから、「できますか？」だけでなく、あなたの答えがあります。しかし、（いくつかの一般的なブラウザ実装では）できない理由の喫煙銃。FirefoxでそのXULを何らかの拡張機能でオーバーライドする方法がない限り、それはおそらくあるでしょう！読者の練習問題として残しておきます。 ：P

2
HostileFork