Multiline text field in tooltip ()?

Question

Is there a way to make the input / input field in the prompt multi-line?

Answer 1

No, browsers only allow single line input for prompt() . However, with a simple change to the jQuery Alert Dialogs library, you can get multi-line input there. Take jquery.alerts.js , find <input type="text" size="30" id="popup_prompt" /> and replace it with <textarea rows="5" cols="30" id="popup_prompt"></textarea> . This must be done so that when displaying jPrompt() , a multi-line input field is displayed.

Change As Mulletfingers999 points out in a comment, jQuery Alert Dialogs are deprecated in favor of jQuery UI dialogs . There you can also show a “modal” dialog, however this dialog can have arbitrary content, which means that the <textarea> is possible if you want to use multi-line input.

Answer 2

For almost any custom web application these days, you'll want to avoid using the clumsy old dialogs like alert() and prompt() . Almost any library you use should have a much better answer. jquery will be fine as others have said. It would also be nice to think about how you can eliminate the need for modality by developing a smarter interface.

“Interesting,” in Firefox, they already use XUL and invent a lot of user interfaces based on this (instead of relying on the “common dialogs” of the underlying OS). There is 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 just hides user interface elements that they don’t need. When prompt invoked, they reuse the username field and hide hidden and hidden elements. This can be seen 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 this is more or less HTML, the only question is what the non-standard <textbox> tag means for the user interface. The XUL control documentation tells us that this is just a single line entry, you will 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. After a little digging through WebKit workarounds, I managed to find chromium / src / chrome / browser / ui / gtk / js_modal_dialog_gtk.cc , in particular 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 field is created using gtk_entry_new() , and the GTK documentation states that GtkEntry is "One Line GtkEntry Field . " For multi-line recording, you will need to use GtkTextView :

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

So your answer is not just "can you?" but smoking guns, why you can’t (in several popular browser implementations.) If there is no way to override this XUL in Firefox with an extension of some kind, that could be so! I will leave this exercise to the reader .: P

Answer 3

Use \ n in double quotes ("\ n")

 prompt("This\nis\nmultiline");