JavaScript - многострочное текстовое поле в подсказке ()?

javascript prompt

39448 просмотра

3 ответа

Есть ли способ сделать текстовое поле / поле ввода promptмногострочным?

Автор: dpp Источник Размещён: 12.11.2019 09:15

Ответы (3)


8 плюса

Решение

Нет, браузеры допускают только однострочный ввод для 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 объявлены устаревшими в пользу диалоговых окон jQuery UI . Там вы также можете показать «модальное» диалоговое окно, которое может иметь произвольное содержимое - это означает, что <textarea>тег возможен, если вы хотите многострочный ввод.

Автор: Wladimir Palant Размещён: 31.08.2011 10:16

2 плюса

Используйте \ n в двойных кавычках ("\ n")

prompt("This\nis\nmultiline");
Автор: Alex Размещён: 31.08.2011 10:07

2 плюса

В наши дни для практически любого пользовательского веб-приложения вы захотите избегать использования неуклюжих старых диалогов, таких как 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>

Они просто скрывают элементы интерфейса, которые им не нужны. В случае вызова 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

Я подумал, что было бы «весело» взглянуть на реализацию в Chromium поверх GTK. Немного покопавшись в обходных оболочках 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 с помощью какого-то расширения, которое вполне может быть! Я оставлю это как упражнение для читателя. :П

Автор: HostileFork Размещён: 31.08.2011 02:01
Вопросы из категории :
32x32