Виджет Textinput

Текстовый ввод

Текстовые поля и области ввода многострочного текста кодируются с помощью стандартных HTML-элементов, а затем улучшаются jQuery Mobile, чтобы сделать их более привлекательными и удобными для использования на мобильном устройстве.

Для сбора стандартного текстового алфавитно-цифрового ввода используйте элемент input с атрибутом type="text". Установите атрибут for элемента label в соответствие с атрибутом id элемента input, чтобы они были семантически связаны. Можно скрывать метку, если она не нужна в макете страницы, но для семантических и доступных целей мы требуем ее наличия в разметке.

• ui-textinput: Внешний контейнер для textinput. Классы ui-textinput-search или ui-textinput-text будут применены, если у textinput есть type='search' или нет соответственно. Класс ui-textinput-clear-button будет применён, когда опция clearBtn имеет значение true. Класс ui-textinput-autogrow будет применён, когда опция autogrow имеет значение true.
  • ui-textinput-search-icon: Класс иконки поиска, когда тип textinput — поиск

<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="">

Это создаст базовое текстовое поле ввода. По умолчанию стили устанавливают ширину поля ввода в 100% от родительского контейнера и выравнивают метку на отдельной строке.

Мини-версия

Для более компактной версии, полезной в панелях инструментов и узких местах, добавьте атрибут data-mini="true" к элементу для создания мини-версии.

<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" data-mini="true">

Это создаст поле ввода, которое не будет таким высоким, как стандартная версия, и будет иметь меньший размер текста.

Опция кнопки очистки

Расширение clearButton предоставляет опцию clearBtn.

Чтобы добавить кнопку очистки к любому полю ввода (например, полю поиска), добавьте атрибут data-clear-btn="true". Текст этой кнопки очистки можно настроить с помощью атрибута data-clear-btn-text="clear input". Кнопки поиска имеют кнопку очистки по умолчанию и не могут быть управляемы этой опцией. Обратите внимание, что эта опция доступна для всех типов полей ввода ниже, кроме тех, которые закодированы с помощью элементов textarea.

<label for="clear-demo">Text Input:</label>
<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">

Эта разметка создает текстовое поле ввода с кнопкой очистки, которая становится видимой, как только введено хотя бы одно символов.

Контейнеры полей

Можно обернуть текстовое поле в контейнер с классом ui-field-contain, чтобы визуально сгруппировать его в более длинной форме.

Примечание: Атрибут data- data-role="fieldcontain" устарел с версии jQuery Mobile 1.4.0 и будет удален в версии 1.5.0. Используйте класс ui-field-contain вместо него.

<div class="ui-field-contain">
  <label for="name">Text Input:</label>
  <input type="text" name="name" id="name" value="">
</div>

Теперь текстовое поле отображается следующим образом:

Дополнительные типы текстового ввода

В jQuery Mobile можно использовать существующие и новые HTML5 типы ввода, такие как password, email, tel, number и другие. Некоторые значения типов отображаются по-разному в разных браузерах. Например, Chrome отображает поле ввода типа range как ползунок. jQuery Mobile стандартизирует отображение range и search путем динамического изменения их типа на text. Можно настроить, какие типы ввода будут понижены до text с помощью опций плагина page.

Одно из основных преимуществ использования более специфичных типов ввода заключается в том, что на мобильных устройствах предлагаются специализированные клавиатуры, которые ускоряют ввод данных вместо стандартной текстовой клавиатуры. Попробуйте следующие поля ввода на мобильном устройстве, чтобы увидеть, какие клавиатуры отображаются на различных платформах.

Поле поиска вне страницы

Виджеты textinput с стилизацией jQuery Mobile могут быть размещены вне страниц jQuery Mobile. Для этого укажите тип ввода как type="text", добавьте атрибут data-type="search", и вручную вызовите плагин textinput на элементе.

Разметка:

<input id="the-search-input" type="text" data-type="search">

Скрипт:

$( function() {
  $( "#the-search-input" ).textinput();
});

Области ввода многострочного текста

Для многострочных полей ввода используйте элемент textarea. Расширение autogrow предоставляет функциональность для автоматического изменения высоты области ввода многострочного текста, чтобы избежать необходимости в внутренней полосе прокрутки.

Установите атрибут for элемента label в соответствие с атрибутом id элемента textarea, чтобы они были семантически связаны, и оберните их в элемент div с классом ui-field-contain для группировки.

Примечание: Атрибут data- data-role="fieldcontain" устарел с версии jQuery Mobile 1.4.0 и будет удален в версии 1.5.0. Используйте класс ui-field-contain вместо него.

<label for="textarea-a">Textarea:</label>
<textarea name="textarea" id="textarea-a">
I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
</textarea>

Это создаст базовую область ввода многострочного текста с шириной, установленной в 100% от родительского контейнера, и меткой, расположенной на отдельной строке. Область ввода многострочного текста будет расширяться, чтобы вместить новые строки по мере ввода:

<div class="ui-field-contain">
<label for="textarea">Textarea:</label>
  <textarea name="textarea" id="textarea"></textarea>
</div>

Область ввода многострочного текста отображается следующим образом и будет расширяться для размещения новых строк по мере набора текста:

Вызов плагина textinput

Этот плагин будет автоматически инициализирован на любой странице, содержащей область ввода многострочного текста или любой из перечисленных выше типов текстового ввода, без необходимости атрибута data-role в разметке. Однако, при необходимости, вы можете напрямую вызвать плагин textinput на любом селекторе, как любой плагин jQuery:

$( "input" ).textinput();

Пониженные типы ввода

Расположение карты понижения типов ввода в плагине страницы устарело, начиная с версии 1.4.0. Начиная с версии 1.5.0, функциональность понижения типов ввода будет реализована модулем degradeInputs.

jQuery Mobile понижает несколько HTML5 типов ввода до типа=text или типа=number после добавления расширенных элементов управления. Например, поля ввода с типом диапазона улучшаются с помощью пользовательского элемента управления ползунком, а их тип устанавливается в числовой для обеспечения функционального поля ввода наряду с этим ползунком. Поля ввода с типом поиска понижаются до типа=text после добавления собственного стилизованного поля ввода поиска.

Модуль degradeInputs содержит список типов ввода, которые устанавливаются либо в true (что означает, что они будут понижены до типа=text), либо в false (что означает, что они будут оставлены без изменений), или в строку, например, "number", что означает, что они будут преобразованы в этот тип (например, в случае типа=диапазон).

Можно настроить, какие типы изменять с помощью $.mobile.degradeInputs, который имеет свойства: цвет, дата, дата-время, "дата-время-локальное", электронная почта, месяц, число, диапазон, поиск, телефон, время, URL и неделя. Убедитесь, что вы настроили это внутри обработчика событий, связанного с событием mobileinit , чтобы он применялся к первой странице, а также к последующим страницам, которые загружаются.

Поле ввода поиска

Поля ввода поиска — это новый тип HTML, стилизованный с круглыми углами в форме таблетки и иконкой «x» для очистки поля после начала ввода. Начните с поля ввода с атрибутом type="search" в вашей разметке.

Установите атрибут for элемента label в соответствие с атрибутом id элемента input, чтобы они были семантически связаны. Можно скрывать метку, если она не нужна в макете страницы, но для семантических и доступных целей мы требуем ее наличия в разметке.

<label for="search-basic">Search Input:</label>
<input type="search" name="search" id="search-basic" value="">

Это создаст базовое поле ввода поиска. По умолчанию стили устанавливают ширину поля ввода в 100% от родительского контейнера и выравнивают метку на отдельной строке.

Мини-версия

Для более компактной версии, полезной в панелях инструментов и узких местах, добавьте атрибут data-mini="true" к элементу для создания мини-версии.

<label for="search-mini">Search Input:</label>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true">

Это создаст поле ввода поиска, которое не будет таким высоким, как стандартная версия, и будет иметь меньший размер текста.

Контейнеры полей

Можно обернуть поле ввода поиска в контейнер с классом ui-field-contain, чтобы визуально сгруппировать его в более длинной форме.

Примечание: Атрибут data- data-role="fieldcontain" устарел с версии jQuery Mobile 1.4.0 и будет удален в версии 1.5.0. Используйте класс ui-field-contain вместо него.

<div class="ui-field-contain">
  <label for="search-2">Search Input:</label>
  <input type="search" name="search-2" id="search-2" value="">
</div>

Поле ввода поиска отображается следующим образом:

Стилевое оформление

Атрибут data-theme может быть добавлен в поле ввода поиска, чтобы установить тему на любой шрифт.

Настройка текста кнопки очистки

Текст кнопки, используемой для очистки поля ввода поиска, можно настроить для всех полей ввода поиска, привязавшись к событию mobileinit и установив свойство $.mobile.textinput.prototype.options.clearBtnText на выбранную строку.

Эта опция предоставляется расширением clearButton.

Вызов плагина textinput

Этот плагин будет автоматически инициализирован на любой странице, содержащей поле ввода с атрибутом type="search", без необходимости атрибута data-role в разметке. Однако, при необходимости, можно напрямую вызвать плагин textinput на селекторе, как любой плагин jQuery:

$( ".mySearchInput" ).textinput();

Виджет textinput обертывает виджеты, основанные на input, в div, используемые для создания стиля. Элементы textarea не обертываются в такой div.

В примере ниже мы добавляем атрибут data-corners="false" к элементу input, поскольку класс ui-corner-all отсутствует в обёртке, что указывает на то, что значение опции "corners" должно быть false.

<label for="pre-rendered-text-field">Pre-rendered input:</label>
<div class="ui-input-text ui-body-inherit ui-shadow-inset">
  <input type="text" data-enhanced="true" data-corners="false" name="pre-rendered-text-field" id="pre-rendered-text-field">
</div>