JavaScript - 提示（）中的多行文本框？

Question

有没有办法在prompt多行中制作文本框/输入框？

Answer 1

使用 \n 括在双引号中（“\n”）

prompt("This\nis\nmultiline");

Answer 2

不，浏览器只允许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 dialogs。在那里您还可以显示一个“模态”对话框，但是该对话框可以具有任意内容 - 这意味着如果您想要多行输入，则可以使用 <textarea> 标签。

Answer 3

如今，对于几乎所有面向用户的 Web 应用程序，您都希望避免使用像 alert() 和 prompt() 这样的笨重的旧对话框。您使用的几乎所有库都应该有更好的答案。 jquery 会像其他人所说的那样好。想想如何通过设计一个更聪明的界面来消除对模式的需求也是一件好事。

“有趣的是”，在 Firefox 中，他们已经在使用 XUL 并在此基础上重新发明了许多用户界面（而不是依赖于底层操作系统的“通用对话框”）。 /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 控件文档告诉我们它只是一个单行条目，您需要<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 documentation 声明GtkEntry 是“单行文本输入字段”。对于多行输入，您必须使用 GtkTextView:

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

所以你的答案不仅仅是“你能吗？”但是为什么你不能（在几个流行的浏览器实现中）的确凿证据。除非有一种方法可以用某种扩展覆盖 Firefox 中的 XUL，很可能有！我将把它作为练习留给读者。 :P