当前位置：文江博客话题详情

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

发布于 2024-12-02 06:53:47 字数 32 浏览 1 评论 0原文

无论如何，有没有办法使文本框/输入框成为多行提示？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

很酷不放纵 2024-12-09 06:53:47

不可以，浏览器只允许 prompt() 单行输入。但是，通过对 jQuery 警报对话框库进行简单更改，您就可以在那里获得多行输入。获取 jquery.alerts.js，查找并将其替换为。这应该可以在调用 jPrompt() 时显示多行输入字段。

编辑：正如 Mulletfingers999 在评论中指出的那样，jQuery 警报对话框已被弃用，取而代之的是 jQuery UI 对话框。在那里您还可以显示一个“模态”对话框，但是该对话框可以具有任意内容 - 这意味着如果您想要多行输入，则可以使用 </code> 标记。

回复收藏 0 原文

迎风吟唱 2024-12-09 06:53:47

对于如今几乎所有面向用户的 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，所以唯一的问题是非标准标签是什么表示用户界面。 XUL 控件文档告诉我们，它只是一行条目，您需要 </code> 来获取更多信息：

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 是“单行文本输入字段”。对于多行输入，您必须使用 GtkTextView：

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

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

For pretty much any user-facing web application these days, you're going to want to avoid using clunky old dialogs like alert() and prompt(). Almost any library you're using should have a much better answer. jquery would be fine as others have said. It would also be good to think of how you might eliminate a need for modality by designing a more clever interface.

"Interestingly", in Firefox they are already using XUL and reinventing a lot of user interface based on that (instead of relying on the "common dialogs" of the underlying OS). There's a template for modal dialogs in /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>

What they do is just hide the elements of the UI that they don't need. In the case of a call to prompt, they re-use the user name field and keep the password and checkbox elements hidden. You can see this happening in /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;

Since it's more or less HTML, the only question is what the non-standard tag <textbox> means for the user interface. The XUL controls documentation informs us that it's only a one-line entry, you would need <textarea> for more:

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

I thought it would be "fun" to look at the implementation in Chromium on top of GTK too. After a bit of digging through the circuitous wrappers of WebKit, I did manage to find chromium/src/chrome/browser/ui/gtk/js_modal_dialog_gtk.cc, specifically this part:

// 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);
}

The text_box is created with gtk_entry_new() and the GTK documentation states that GtkEntry is "A single line text entry field". For multi-line entry you would have to use GtkTextView:

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

So there's your answer not just of "can you?" but the smoking guns of why you can't (in a couple of popular browser implementations.) Unless there's a way to override that XUL in Firefox with an extension of some kind, which there may well be! I'll leave it as an exercise for the reader. :P

回复收藏 0 原文