JavaScript - 在prompt()中创建多行文本框？

Question

有没有办法使 prompt 弹窗中的文本框/输入框支持多行？

- kazinix

Answer 1

不，浏览器只允许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 Alert Dialogs已被弃用，取而代之的是jQuery UI dialogs。在那里，您还可以显示“模态”对话框，该对话框可以具有任意内容 - 这意味着如果您需要多行输入，则可以使用<textarea>标记。

- Wladimir Palant

---

对于新观众：该插件已被存档，开发者建议使用jQuery UI的[dialog widget]（http://jqueryui.com/dialog/）。 - whirish

我希望避免使用jQuery，因为我将其用作简单的JavaScript书签。 - Wyatt Ward

@Wyatt8740：那么你必须重新实现功能-用你的层覆盖页面并向其中添加提示内容。不幸的是，这并不完全简单。 - Wladimir Palant

@WladimirPalant 刚刚才意识到您是7-zip的作者。谢谢 :) 此外，我已经使用了document.open()， document.write() 和 <script> 标签来完成它。过程非常痛苦，但终于实现了。 - Wyatt Ward

我也将其用作书签。可惜现在我必须打造一个新的轮子，以节省点击+拖动复制+粘贴的时间。 - Craig Brett

Answer 2

对于目前几乎所有用户界面的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);
}

文本框是使用gtk_entry_new()创建的，GTK文档指出GtkEntry是"单行文本输入字段"。如果需要多行输入，您需要使用GtkTextView:

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

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

- HostileFork says dont trust SE

---

<textbox> 可以是多行和单行的。这里是单行输入，因为缺少 multiline 属性。请注意，您发现的常见对话框在 Firefox 4 中与 Web 无关 - 它们已被替换为实现在其他地方（但沿着相同的线路）的选项卡模态对话框。 - Wladimir Palant

@Wladimir：感谢您的阅读。我要指出，截至2011年8月，Firefox 3.6仍占Firefox用户的30.28％，因此尚未“对网络不相关”。我对我提供链接的XUL文档中的遗漏不承担责任。这是我第一次深入研究这些代码库，纯粹出于自己的好奇心而决定回答问题，而不是简单地回答“不能”。我花了一点时间来探索如何制作一个覆盖提示的扩展程序，但最终决定在Firefox 6上尝试制作它，发现大多数“如何制作扩展程序”的教程都已经过时了。 - HostileFork says dont trust SE

你链接的文档中列出了<textbox>和<textbox multiline="true"/>。:) 无论如何，教程应该还是可以用的 - 就常规的XUL叠加而言，没有太多变化。但是你不会在叠加中走得太远，因为相关代码已经移动到了一个XBL绑定中（tabprompts.xml），并且更改它会更加复杂。 - Wladimir Palant

哦，多行文本，你是如此嘲弄我。你知道吗，我确实做了很多研究，然后事后回去找到了我认为相同但可能不同的文件。无论如何，如果它强烈暗示一个不同的特征，然后后来又加入了一个“...但是！”那么这就会变得令人困惑。 - HostileFork says dont trust SE

true，“prompt（）”已经过时了-但对于书签来说，它非常简单易用。（还要注意的是，2015年不幸的是Mozilla决定弃用XUL-真是一场悲剧）。 - Wyatt Ward

Answer 3

使用双引号括起来的 \n （"\n"）

prompt("This\nis\nmultiline");

- Alex

---

Alex，我指的是作为输入框的textbox。 - kazinix

在这种情况下，不行。提示是一个本地浏览器对象，因此不能直接编辑。最好使用jQuery或类似的工具创建自己的提示框 :-) - Alex

无法工作，它们被剥离了。 - jjxtra