Question

无论如何要在prompt多行中创建文本框/输入框？

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警报对话已被弃用，而不是jQuery UI dialogs。在那里你还可以显示一个“模态”对话框，该对话框可以包含任意内容 - 这意味着如果你想要多行输入，可以使用<textarea>标签。

Answer 2

使用\ n用双引号括起来（“\ n”）

prompt("This\nis\nmultiline");

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

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

3 个答案: