Подсказка input: Подсказывающий текст | htmlbook.ru — Вебджем.рф

Содержание

создание подсказок в input поле online-формы

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

Первый способ появился очень давно, реализован на JS:

<input name="search" maxlength="30" 
alt="Поиск" type="text" size="30" value="Поиск..." 
onblur="if(this.value=='') this.value='Поиск...';" 
onfocus="if(this.value=='Поиск...') this.value='';">

При фокусировке курсора на поле меняем значение поля на пустую строку, а при потере фокуса, если значение осталось пустым, заполняем поле дефолтным «Поиск…». Из плюсов подхода — практически безотказен, можно кастомизировать, добавлять какие угодно проверки и т.д. Из минусов — не работает при отключенном js, при фокусировке на поле не виден пример вводимой информации.

Способ второй, пришел со вводом в обиход css3/html5 — свойство placeholder:

<input name="search" maxlength="30" alt="Поиск" type="text" size="30" placeholder="Поиск...">

Указываем значение свойства placeholder, расслабляемся. Плюсы — простота, работает без javascript. Минусы — не поддается кастомизации, не поддерживается в старых браузерах.

Способ третий появился так-же довольно давно, но повсеместно начал использоваться только в последние пару лет. На самом деле он очень похож первый, но в отличие от него, подсказка выносится за основной тег.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input name="search" maxlength="30"
 alt="Поиск" type="text" size="30" value="Поиск..."
 onblur="$('label[for=search]').hide()"
 onfocus="$('label[for=search]').show()">
<label for="search">Пример поисковой фразы</label>

Наглядный пример (полный код с css):

<!doctype html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Пример номер три</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <style type="text/css">
 html,body{
 margin: 0;
 padding: 0;
 border: 0;
 height: 100%;
 width: 100%;
 font-family: Tahoma, PT Sans, Arial, sans-serif;
 }
 div {
 width: 300px;
 height: 300px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -150px;
 margin-top: -150px;
 }
 input{
 width: 278px;
 padding: 5px 10px;
 outline: none;
 border: 1px solid #006699;
 margin: 0px;
 font-size: 18px;
 margin-top: 5px;
 }
 label{
 display: inline-block;
 background: #006699;
 width: 294px;
 color: #fefefe;
 font-size: 14px;
 padding: 3px;
 }
 </style>
</head>
<body>
<div>
 <input name="name" alt="Поиск" type="text" placeholder="Гоголь Николай Васильевич" autocomplete="off"
 onblur="$('label[for=name]').hide()"
 onfocus="$('label[for=name]').show()">
 <label for="name">Ф.И.О (Гоголь Николай Васильевич)</label>
 <input name="phone" alt="Поиск" type="text" placeholder="+79265554488" autocomplete="off"
 onblur="$('label[for=phone]').hide()"
 onfocus="$('label[for=phone]').show()">
 <label for="phone">Телефон (+79265554488)</label>
 <input name="snils" alt="Поиск" type="text" placeholder="123-456-789-00" autocomplete="off"
 onblur="$('label[for=snils]').hide()"
 onfocus="$('label[for=snils]').show()">
 <label for="snils">Снилс (123-456-789-00)</label>
</div>
</body>
</html>

Минус такого оформления — скачущие формы ввода, как вариант — использовать для label такие настройки css:

input{
 width: 278px;
 padding: 5px 10px 30px 10px;
 outline: none;
 border: 1px solid #006699;
 margin: 0px;
 font-size: 18px;
 margin-top: 5px;
}
label{
 display: block;
 background: #006699;
 width: 294px;
 height: 23px;
 color: #fefefe;
 font-size: 14px;
 padding: 3px;
 margin-top: -29px;
 position: relative;
 line-height: 23px;
}

А так же изменить поведение функции onfocus:

onfocus="$('label[for=phone]').css({'display':'block'})"
//Для остальных полей соответственно проставить for

В таком случае поля не прыгают, но поля input получаются растянутыми по вертикали.

Хочешь стать экспертом в SEO?

Пройди курсы от SEO Интеллект

Подробнее Понравилось? Репост!
inputmode — HTML | MDN
Глобальный атрибут inputmode является вычисленным атрибутом, который предоставляет подсказку для типа данных, которые может ввести пользователь при редактировании содержания элемента. Атрибут может принимать следующие значения:
none
Без виртуальной клавиатуры; это полезно когда приложение или сайт имплементируют свои собственные клавиатуру или поле ввода.
text
Стандартная раскладка клавиатуры для пользователя, учитывая его локализацию.
decimal
Дробные значения чисел, содержащие разряд и соответствующий символ-разделитель, который учитывает локализацию пользователя (чаще всего «.» или «,»). Устройства могут показывать или нет символ минуса (отрицательное значение).
numeric
Числовая раскладка клавиатуры; числа от 0 до 9. Устройства могут показывать или нет символ минуса (отрицательное значение).
tel

Раскладка для ввода номера телефона, включая числа от 0 до 9, звёздочку («*»), и решётку («#»). Поля ввода форм, что имеют обязательное поле номера телефона должны использовать <input type="tel">.
search
Виртуальная клавиатура, оптимизированная для работы с поиском. Например, кнопка ввода может быть заменена на «Поиск», и др.
email
Виртуальная клавиатура, оптимизированная для ввода электронной почты, с использованием символа «@» и др. Поля ввода форм, что имеют обязательное поле электронной почты должны использовать <input type="email">.
url
Виртуальная клавиатура, оптимизированная для ввода ссылок. Может иметь кнопку «/», расположенную в более удобном месте. Поле может содержать функцию истории ввода и др. Поля ввода форм, что имеют обязательное поле ссылки URL должны использовать <input type="url">.
Атрибутом по умолчанию является

text, которое учитывает локализацию пользователя.
BCD tables only load in the browser
Как сделать подсказки для полей ввода HTML — атрибут placeholder для input, select, textarea
28.07.18 HTML 1259
При добавлении полей ввода на страницы сайта для них необходимо указывать вспомогательный текст – подсказки, которые объясняют предназначение полей. Раньше такие подсказки обычно делались просто путем добавления строки текста выше над полем, но можно было встретить самописные решения, которые выполняли роль нового атрибута placeholder.

Как все началось? Часто на практике приходилось для компактности вводить подсказки прямо в полях вводах, а не добавлять лишнюю строку с подсказкой. Но специального атрибута для выполнения этой функции не было – можно было лишь просто добавить текст внутри поля при помощи значения value. Когда пользователь кликнет на поле — при помощи JavaScript происходило удаление текста и если пользователь ничего не оставил в поле, то при удалении фокуса — подсказка возвращалась на свое место опять же при помощи JavaScript. Также необходимо было изменять цвет текста на более светлый при помощи CSS-свойств, чтобы он выглядел как подсказка, а не обычный текст. То есть, данное решение требовало дополнительного написания кода.

Видя такое положение дел, разработчики HTML начали работу над этим – для тега input type=»text» со временем был разработан и добавлен специальный атрибут – placeholder. Он позволяет быстро прописать нужную подсказку для текста, которая будет показана пользователю. Цвет текста в подсказке сразу выделяется серым цветом.
На настоящее время поддержка атрибута placeholder есть во всех современных браузерах. Браузеры, не поддерживающие данный атрибут, просто игнорируют его. Существуют специальные разработки – полифилы, которые при помощи JavaScript реализуют работу атрибута placeholder. Поэтому можно просто писать данный атрибут, а в крайних случаях для остальных браузеров использовать полифилы.

<input type="text" placeholder="Введите текст">
Но как быть с другими типами полей input? Например, type=»checkbox» и type=»radio». Для этих типов полей можно использовать тег label, он задает подсказку для помещаемого в него поля. Например, можно написать так:
<label> <span>Отметьте нужное:</span> <input type="checkbox"> </label>
Для select нет атрибута placeholder, но можно сделать подсказку внутри поля простым способом – ею будет первый option из этого select. Можно визуально выделить его, например, добавить вначале и в конце дефис.
<select> <option value="- Выберите значение -">- Выберите значение -</option> <option value="Значение 1"> Значение 1</option> <option value=" Значение 2"> Значение 2</option> <option value=" Значение 3"> Значение 3</option> </select>

Остается разобраться с textarea. У тега textarea атрибут placeholder отсутствует, но можно добавить подсказку прямо в поле, просто разместив его между тегами textarea.
<textarea>Введите текст</textarea>
Краткий итог, как сделать подсказки для полей ввода HTML:
для input type=»text» следует использовать атрибут placeholder;

для остальных типов input можно использовать тег label;

для select используется подсказка в виде первого option;

для textarea подсказка размещается внутри данного тега.

Мы рассмотрели, каким образом можно сделать подсказки для различных полей ввода HTML, даже если они не поддерживают атрибут placeholder.
Заголовок для поля ввода и его доступность :: Хранитель заметок
Подпись или заголовок для поля ввода размечается тегом <label>. Наличие связанного с ним элемента <input>, <textarea> или <select> не является обязательным условиям. Хотя, при отсутствии такого элемента, сам заголовок приобретает другой смысл и может быть размечен другим тегом.
<label> может быть как обёрткой для поля ввода, так и быть связанным с ним с помощью атрибутов. Вот несколько типовых вариантов разметки:
Вариант №1:
<label> Фамилия <input type="text" name="family-name"> </label>
Вариант №2:
<label for="family-name-field">Фамилия</label> <input type="text" name="family-name">
Клик по надписи в обоих случаях приведёт к том, что связанное с этой надписью поле ввода получит фокус. В первом случае связь инпута и лейбла определяется явно (фокус получает первое дочернее поле ввода). Во втором случае связь осуществляется с помощью атрибута id у поля ввода и аналогично значения у атрибута for лейбла.
Второй способ выглядит привлекательнее, так как даёт большую свободу при оформлении разметки, но требует обязательного наличия уникального идентификатора. Разместить две формы с абсолютно идентичной разметкой на одной странице уже будет нельзя.
Подсказка в поле ввода
В современном дизайне отдельно стоящие подписи всё чаще стали заменяться подсказками, которые располагаются прям внутри поля ввода.
<input type="text" placeholder="Фамилия" name="family-name">
Но не стоит путать подсказку и подпись.
Доступность
Но совсем отказываться от <label> нельзя из-за того, что вспомогательные технологи не зачитывают подсказки. Тег нужно оставить в разметке, но скрыть его от пользователя.
<label for="family-name-field">Фамилия</label> <input type="text" placeholder="Фамилия" name="family-name">
Скрыв подпись к полю ввода с помощью стиля display: none , мы не решили проблему с доступностью текста подписи. Вспомогательные технологии игнорируют элементы, к которым применён такой стиль.
Вернуть видимость текста можно опять же несколькими способами.
Способ №1
<label> <span>Фамилия</span> <input type="text" placeholder="Фамилия" name="family-name"> </label>
Текст подсказки оборачивается в дополнительный элемент, который уже скрывается стилем display: none.
Скринридеры понимает, что <label> видим для пользователя и зачитывает его содержимое, не обращая внимания на то, что оно оказывается скрытым.
Способ №2
<label for="family-name-field">Фамилия</label> <input aria-labelledby="family-name-label" type="text" placeholder="Фамилия" name="family-name">
Специально для вспомогательных технологий можно явно указать элемент, содержимое которого считать подписью. Оно будет зачитываться независимо от видимости этого элемента. Кроме того, подписью может стать любой другой элемент.
Как вариант, явно указать подпись можно с помощью атрибута aria-label.
Способ №3
<label for="family-name-field">Фамилия</label> <input type="text" placeholder="Фамилия" name="family-name">
Класс visuallyhidden выключает элемент из потока и делает его размеры 1×1 пиксель. Формально подсказка остаётся видимой и зачитывается ридерами, но фактически её не видно на экране.
У всех способов есть свои плюсы и минусы:
первый вариант оказался в итоге самым компактным и универсальным, но появился дополнительный элемент в разметке;
второй вариант самый громоздкий (требуется слишком много атрибутов и два уникальных идентификатора), но в то же время и самый надёжный;
третий вариант выглядит хорошим компромиссом, если не позаботиться о том, чтобы id инпута не повторялся на странице.
Ещё заметки со схожей тематикой
эффект плавающего текста (урок #4)
ФОРМА на CSS / Эффект плавающего текста
В данном уроке разбираем эффект плавающего текста на CSS. Эффект сделаем на форме авторизация. В ней откажемся от placeholder, а подсказку отобразим в label которую в дальнейшем оформим под стиль подсказки.
Для начала, разбираем сам эффект, а затем рассмотрим логику его работы.
В нашей форме присутствуют поля input для ввода различной информации, внутри каждого поля присутствует подсказки для их заполнения.

Наша задача, при фокусе, то есть клику, текст с подсказкой приподнять вверх, а само поле сделать активным для ввода.
Что бы создать такой эффект, откажемся от placeholder и подсказку выведем в отдельном блоке который расположим за input. Далее все довольно просто, отлавливаем курсор в при фокусе в поле, а затем и при помощи амперсанта (~), вешаем стили на рядом стоящий label с подсказкой, которому придаем свое оформление.
Конечно, тут есть некие тонкости, но в принципе, механизм работы схож, что делали в предыдущем уроке.
И так, давайте его реализуем.
Описываем структуру input и label
Под каждым input допишем отдельный label, который будет выступать в роли подсказки в место placeholder. Само текстовое содержание копируем из input, и вставляем в label.
<input type="email"> <label>Введите E-mail</label> <input type="password"> <label>Введите пароль</label>
Далее нужно текст подсказки поместить в область input. Самое элементарное, это обернуть их в отдельный контейнер, а затем с позиционировать label по центру поля.
Обворачиваем, создаю контейнер с классом box-input и в нем размещаем скопированные поля input и label.
<div> <input type="email"> <label>Введите E-mail</label> </div> <div> <input type="password"> <label>Введите пароль</label> </div>
Далее переходим в CSS и оформляем их.
Оформляем поля input и label
Первым делом отбираем этот блок, и задаем для него position: relative. Это даст возможность позиционировать элементы в нутрии блока и подсказку расположить в самом поля label.
/* Плавающий текст */ .box-input { position: relative; }
Затем оформляем само поле. Уберем в нем обводку, и пропишем ее только к нижней части. Отступы с лева и права не нужны, их скрываем, зададим только сверху.
Далее позиционируем подсказку, на место где находиться текст.
Позиционируем label абсолютно родителю. Координаты устанавливаем по нулям, а при помощи padding выравниваем текст относительно текста в поле. Затем делаем его светлее и переходим к реализации анимации по клику.
.box-input input { border: none; border-bottom: 2px solid #e9eaea; padding: 10px 0; } .box-input label { position: absolute; top: 0; left: 0; padding-top: 10px; color: #c4c9c9; }
Анимация по клику
Для анимации нам понадобятся две вещи это понимание от куда она начинается, и где она будет заканчивается.
Начальная точка есть, осталось описать конечный ее результат.
Для анимации подсказки, первым делом зададим ей плавность передвижения, прописываем transition.
Затем при помощи (~), свяжем поле с подсказкой в момент фокуса.
Обращаемся к полю input, с псевдоклассом :focus и достаем сестринского селектора label, который в дальнейшем предварительно оформим.
.box-input label { … transition: .5s; } .box-input input:focus ~ label { outline: 1px solid orange; top: -30px; }
Проблемы при анимировании
Но тут сталкиваемся с двумя проблемами:
Первая, мы не можем совершить клик в поле, в области label, так как он находится по ДОМ структуре ниже и не дает это сделать.
Вторая проблема, как только убрали с поля фокус, подсказка обратно возвращается в низ, не в зависимости, заполнено поле или нет. Нам нужно сделать так, что бы при заполненном input подсказка фиксировалась в верхней части, как только текст убрали, она обратно возвращалась в поле.
Для решения первой проблемы, достаточно убрать событие указателя на label, для этого pointer-events ставим в none.
.box-input label { … pointer-events: none; }
Для решения второй проблемы, воспользуемся дополнительным атрибутом required, который проверяет поле на валидацию. То есть, если поле валидацию проходит, значит, по логике оно заполнено и можем применить стили для анимирования подсказки.
Переходим в index файл и дополнительный к input добавляем атрибут required, а в CSS проверим его на валидность заполнения.
<input type="email" required > <input type="password" required >
Сталкиваемся с очередной проблемой, поле с паролем замечательно работает в тоже время Email почему то не срабатывает. На самом деле причина элементарная, данное поле не проходит валидацию.
Вывод, прописываем в type не Email, a text. Вот в таком варианте, все будет нормально отрабатывать.
<input type="text" required >
Вернемся к подсказкам и дооформим их. Убираем обводку, уменьшаем отступ и текст, а также зададим цвет поярче.
.box-input input:focus ~ label, .box-input input:valid ~ label { top: -20px; font-size: 12px; color: #33d3fe; }
Проверяем, все замечательно работает.
Это показал я вам один из вариантов как реализовать такой эффект на CSS и HTML, конечно есть другие варианты, но принцип их работы практически схож.
Для практики, попробуйте самостоятельно оформить поля в форме регистрация, возможно, придумаете, свой оригинальный способ.
В следующем уроке разберем псевдоэлементы ::before и ::after, и на практике все это закрепим на примере кнопки.
Урок подготовил Горелов Денис.
Оставить комментарий:
Атрибут placeholder | wm-school
Атрибут placeholder (от англ. «placeholder» — «заполнитель») указывает краткую подсказку (слово или короткую фразу), предназначенную для помощи пользователю с вводом данных. Краткая подсказка отображается в элементе формы в случае, когда этот элемент не имеет значения.
Текст подсказки скрывается, когда пользователь вводит значение (любой символ) в текстовое поле, если его убрать, то подсказка будет отображена снова.
Синтаксис
<textarea placeholder="text"> ... </textarea> <input placeholder="text">
Значения
Текстовая подсказка, которая описывает ожидаемое значение для ввода в элемент.
Значение по умолчанию
Нет.
Применяется к тегам
Примечание: Атрибут placeholder может быть использован с полями данных (тег input) следующих типов (атрибут type): text, search, url, tel, email, и password.
Отличия HTML 4.01 от HTML 5
Атрибут является новым в HTML 5.
Примеры использования:
Атрибут placeholder (Элемент <input>)
Пример HTML: Попробуй сам
<form action="action_form.php"> Login: <input type = "text" name = "login" placeholder = "Введите ваш логин"><br> Password: <input type = "password" name = "password" placeholder = "Введите ваш пароль"><br> <input type="submit" value="Отправить"> </form>
Атрибут placeholder (Элемент <textarea>)
Пример HTML: Попробуй сам
<textarea rows="4" cols="50" placeholder="Ваше сообщение..."> </textarea>
Поддержка браузерами
Атрибут placeholder имеет следующую поддержку браузерами для каждого элемента:
Элемент
<input> 10+ 10+ 11+ Да 5+ 4+
<textarea> 10+ 10+ 11.5+ Да 5+ 4+
Элемент
<input> 2.3+ 4+ 11+ 5+
<textarea> 2.3+ 4+ 11+ 5+
Спецификации
Спецификация Статус
HTML 5 (W3C) Рекомендация (input-placeholder)
HTML 5 (W3C) Рекомендация (textarea-placeholder)
HTML 5.1 (W3C) Рекомендация (input-placeholder)
HTML 5.1 (W3C) Рекомендация (textarea-placeholder)
Учебник HTML
HTML уроки: HTML Атрибуты

UX в контактных формах: основы повышения конверсии
Вам нравится заполнять формы? Думаю, нет. Это не то, что мы хотим от сервиса. Пользователи просто хотят купить билет, забронировать номер в гостинице, совершить покупку и так далее. Заполнение формы – неизбежное зло, с которым им приходится иметь дело. Это касается и вас? Итак, что на самом деле влияет на отношение человека к подаче формы?
Это может отнимать массу времени.
Сложные формы часто трудно понять (или вы просто не хотите их заполнять).
Формы могут запрашивать информацию, которой вы не хотите делиться – данные кредитной карты, номера телефонов, адреса и т.д.
Поля формы – фактически самый важный инструмент для взаимодействия сервиса с пользователем, независимо от того, для чего она предназначена – будь то подписка на рассылку новостей или пошаговая форма для сбора данных.
В этой статье мы рассмотрим наиболее распространенные вопросы, возникшие у дизайнеров-стажеров в нашей компании. Ниже приведены ответы на часто задаваемые вопросы и рекомендации, как сделать веб-формы удобными для пользователей, а также советы по улучшению взаимодействия с пользователем.
Размещать форму в двух столбцах – это нормально?
Исследования по отслеживанию движения глаз показали, что формы в один столбец лучше, чем в несколько. Почему так? То, как мы просматриваем веб-сайт, похоже на то, как мы заполняем форму: переходим сверху вниз, сосредотачиваясь на содержании. Форма с параллельными столбцами может легко ввести пользователей в заблуждение и отвлечь их. Чтобы не прерывать вертикальную ориентацию пользователя, поместите поля друг под другом в одном столбце. Конечно, у каждого правила есть свои исключения. Как в примере ниже, короткие или логически смежные поля (номер мобильного телефона, город, штат и код города) могут быть помещены в строку.
Размещение полей в строку
Если форма имеет довольно сложную структуру (например, этап проверки заказа в интернет-магазине или стадию регистрации на платформе получения кредита), ее можно визуально разделить на семантические группы добавлением отступов или заголовков между ними. Это даст пользователям ощущение прогресса при заполнении формы, не перегружая их.
Разделение форм на семантические группы
Где следует размещать подписи?
Подписи сообщают пользователям, какая информация относится к заданному полю формы, и они обычно располагаются за пределами поля формы. Совсем недавно было всего два варианта размещения подписей: над полями и слева от них. Некоторое время назад появилась альтернатива: дизайнеры начали анимировать формы и скрывать подписи в плейсхолдерах. Было много споров о лучшем способе показать подписи, но до сих пор нет окончательного ответа. Ясно одно: размещение подписей зависит от ситуации. Давайте рассмотрим каждый вариант.
Размещение подписей над полями
Это наиболее распространенное размещение подписей и, как подтверждено исследованиями UX Google, не без оснований. Оно лучше адаптируется к размерам смартфона, что важно для адаптивной разметки.
Размещение подписи над полями
Размещение подписей слева от полей
Это лучший вариант, если вам нужно отобразить много полей ввода данных. Подписи, расположенные слева получают больше внимания и не будут смешиваться с другими полями. Более того, такая контактная форма займет меньше места по вертикали. Но имейте в виду, что такой метод подходит только для декстопных версий приложения или веб-сайта; для мобильных устройств размер всегда – проблема (экран слишком узкий для размещения подписей слева). Это может вызвать проблемы у пользователей, которые могут не увидеть данные ввода в полном объеме или не заметить опечатки перед отправкой формы. Чтобы предотвратить отправку форм с ошибками, вам необходимо создать дополнительные прототипы, чтобы сделать сайт удобным для смартфонов.
Размещение подписей слева от полей
Размещение подписей в полях ввода
Интерактивные подписи, размещенные внутри поля, становятся все более популярными у дизайнеров UX за возможность проверки перед заполнением. Анимация может быть другой, но процесс тот же: после нажатия на поле с плейсходером подпись не исчезает, но перемещается вверх поля, давая пользователю пространство для ввода данных.
Преимущества этого подхода очевидны: это экономит пространство, и анимация понятна пользователю. Но анимация в формах не всегда лучшее решение. Это зависит от контекста формы. Если вы работаете над формой с небольшим количеством полей (поле входа в аккаунт или подписка на новостную рассылку), то нет нужды в подписи сверху, потому что пользователю нужно запомнить, не так много информации. Это больше подходит для сложных форм с несколькими разделами. Несмотря на преимущества этого метода, также подумайте о том, как выпадающий список будет выглядеть и соответствовать анимации.
Размещение интерактивных подписей
Тем не менее, плейсхолдеры интерактивных подписей намного лучше статических. Когда пользователь нажимает на поле ввода, подпись перемещается вверх, оставаясь видимой, а статическая – просто исчезает.
Можем ли мы использовать плейсхолдер вместо подписи?
Есть много способов дать подсказки; одна из них – обычная реализация инструкций в полях формы. К сожалению, тестирование пользователей постоянно показывает, что плейсхолдеры полей формы чаще вредят юзабилити, чем помогают. Они могут серьезно усложнить процесс заполнения формы, особенно если форма состоит из более чем десяти полей.
Исчезающий текст плейхолдера вызывает напряжение кратковременной памяти пользователя. Людям трудно запоминать, какая информация должна быть внесена в это поле, а также проверять и исправлять ошибки. Это также добавляет дополнительную визуальную и когнитивную нагрузку на пользователей.
Как мы видели, трудность заключается в том, чтобы сохранить текст плейсхолдера вне поля зрения, когда пользователь нажимает на поле, чтобы заполнить его. Без подписей пользователь не может проверить введенные данные перед отправкой формы. Они могут легко забыть, какие данные они должны заполнить в текущем поле, и являются ли предыдущие данные безошибочными – всегда существует большой риск ложной информации. Пользователь должен будет открыть текст плейсхолдера, удалив текст в каждом по очереди, чтобы убедиться, что он ввел нужные данные. На самом деле, многие даже не поймут, что есть угроза совершить ошибку, и не приложат усилий для двойной проверки.
Кроме того, такой подход не будет удобен для пользователей, которые перемещаются между полями, нажав клавишу Tab, потому что они не будут анализировать данные в следующем поле перед переключением на него. Плейсхолдер, который исчезает, когда курсор помещается в поле формы, раздражает пользователей, которые перемещаются по странице при помощи клавиатуры.
Плейсхолдер вместо подписи
Несмотря на недостатки, есть случаи, когда использование подписи в качестве плейсхолдера вполне уместно. Например, для подписки на рассылку новостей мы можем заполнить только одно поле «Электронная почта».
Плейсхолдер вместо подписи в форме регистрации
Как уменьшить когнитивную нагрузку формы?
Следите за интервалом
Подпись и ее поле должны быть визуально сгруппированы, чтобы не путать пользователей, и чтобы они могли понять, какая подпись принадлежит к какой области. Кроме того, следите, чтобы были равные отступы и подписи располагались на равном расстоянии между двумя полями.
Визуально сгруппированные подписи
Автофокус на первом поле ввода
Автофокус направляет пользователей к начальной точке формы. Мы рекомендуем выделить первое поле при помощи акцента цвета границы, цветом фона или обоими способами. Призвав пользователя заполнить его, вы ускорите регистрацию или покупку.
Автофокусировка на первом поле ввода
Никогда не используйте заглавные буквы
Особенно в формах, содержащих от трех до четырех полей. Слова, полностью написанные заглавными буквами, трудно читать. Кроме того, кажется, что вы кричите.
Подписи, написанные с Caps Lock
Являются ли кнопки частью UX формы?
Кнопка предназначена для направления пользователей на совершение действия. Вот почему дизайн кнопок всегда должен быть узнаваем и понятен. Подумайте о своем веб-сайте или приложении, как о части разговора, начатом занятым пользователем. Кнопка играет решающую роль в этом разговоре.
Кнопка должна пояснять действие
Хорошее диалоговое окно – это не просто запрос пользователям, какие действия они хотят выполнить. Это значит сделать каждый вариант максимально ясным. Вот почему так важно иметь отдельную подпись для каждого параметра, который помогает «как раз вовремя», и дает пользователям больше уверенности в выборе правильного действия.
Назовите кнопку так, чтобы объяснить, что она делает, вместо использования общей подписи (например, «ОК»). BettingExpert получил на 31.54% больше подписчиков , изменив простой глагол на призыв к действию. Используйте глагол, когда это возможно, вместо «Да» или «ОК», потому что ваши кнопки будут иметь смысл вне контекста с пояснительным текстом или заголовком. Имейте в виду, что ваш призыв к действию должен отражать намерения пользователя. Например, если это регистрация, то, очевидно, назовите кнопку «Регистрация».
Кнопка должна пояснять совершаемое, при ее нажатии действие
Отделяйте основные действия от вторичных
Основное действие, связанное с формой, должно нести более сильный визуальный вес. Вторичные действия должны обладать самым слабым визуальным весом, чтобы минимизировать риск ошибки и направлять людей к успешному результату. Основные кнопки действий должны быть промаркированы.
Правильно используйте первичные и вторичные кнопки. Если у вас есть две кнопки (первичная и вторичная), визуально дифференцируйте их, чтобы уменьшить вероятность ошибки. Основная кнопка должна выглядеть более заметной.
Основная кнопка должна выглядеть более заметной
Выделяйте кнопки
Не делайте кнопку активной, пока все поля формы не будут заполнены. Это может быть отличным решением, чтобы помочь пользователю визуально проверить свои данные перед отправкой.
Не нажимайте кнопку до заполнения данных
Возможно ли облегчить процесс заполнения формы?
Добавьте автозаполнение
Автоматизация ввода данных предотвращает ошибки, сокращая поля, необходимые для заполнения. Кроме того, согласно исследованиям Google, автозаполнение помогает людям заполнять формы на 30% быстрее. Если пользователь уже зарегистрирован в вашей службе, автоматически заполняйте данные из его аккаунта в соответствующие поля на этапе проверки. Также учтите, что вы можете автоматически заполнять текстовые поля городов и регионов на основе кода зоны или данных геолокации. Не забудьте оставить эти поля доступными для редактирования, чтобы дать пользователям возможность контролировать заполнение формы.
Автозаполнение на основе данных геолокации
Не забывайте про Masked Input
Это плагин, который автоматически форматирует поле. Такое решение хорошо подходит для дат, времени, мобильных номеров и т. д. Этот плагин значительно упрощает заполнение формы. Пользователи не будут задавать больше вопросов, потому что им все ясно.
Подсказки от masked input
Будьте оригинальны
Используйте длину поля в качестве подсказки для ответа. Это имеет смысл для полей с ограниченным количеством символов, таких как поле мобильного номера, домашний адрес и код области.
Длина поля в качестве намека на подразумеваемый ответ
Избегайте выбора из выпадающего списка, если у вас всего 2 или 3 варианта
Вместо выпадающих меню используйте переключатели, чтобы быстро получить сообщение и не замедлять пользователя. Все должно быть ясно без дополнительных кликов.
Использование переключателей вместо выпадающих списков
Проверка правильности заполнения форм
Проверка правильности заполнения формы имеет решающее значение. Выделите те поля, где обнаружены ошибки, и объясните, почему поле не проверялось.
Проверка формы
Также объясните все требования к данным и их формату. Если пароль пользователя должен содержать шесть символов, укажите это. Не заставляйте пользователей догадываться. Сделайте процесс удобным и понятным.
Предотвратите основные ошибки в поле пароля
Это может быть предварительный просмотр паролей или еще одна возможность проверить данные перед отправкой. Кроме того, если у вашего сервиса есть особые требования к паролям, сообщите об этом пользователям, прежде чем они заполнят это поле.
Предотвращение ошибок в поле пароля
Кстати, при заполнении поля пароля довольно часто пользователь сталкивается с известной проблемой – caps lock включен и пользователь забыл об этом. Мы рекомендуем вам уведомлять пользователей о нажатии кнопки caps lock, чтобы предотвратить отказ пользователя от заполнения формы, а также избежать отрицательного опыта работы с веб-сайтом.
Клавиша Caps Lock нажата
Позвольте пользователям авторизоваться посредством социальных сетей
Регистрация через аккаунт в соц. сетях может быть действительно мощным инструментом. Это экономит пользователям много времени. Если вы предлагаете быструю регистрацию посредством социальных сетей, не забудьте заверить людей в безопасности их данных и точно объясните, какая информация вам нужна. Также сообщите пользователям, что вы не будете без разрешения использовать их данные. Чтобы усилить чувство безопасности, вы можете добавить иконку замка. Оставайтесь на стороне пользователей и заботитесь об их безопасности.
Авторизация через аккаунт в социальных сетях
Местоположение пользователя влияет на UX формы ввода?
Да, помните о локальных различиях. Если сервис предназначен для двух и более рынков (таких как США, Европа и Азия), будьте чувствительны к различиям между ними. Неудивительно, что названия полей, подсказок и т.д. будет варьироваться в зависимости от региона.
Вот некоторые моменты, на которые следует обратить внимание:
Каждая страна имеет свой собственный формат номера, поэтому маски ввода также должны различаться.
В США указывается ZIP code, тогда как в Европе это postal code.
Поле «штат» требуется только в США. (На самом деле, нет. Еще оно требуется в Бразилии, Индии, Австралии, Мексике и еще нескольких странах – прим. переводчика).
Примеры форм с локальными различиями
Вывод
Как видим, проектирование хорошей формы регистрации – это сложный процесс. UX имеет значение. Чтобы улучшить UX, дизайнеру нужно поставить себя на место пользователя. Не допустите, чтобы пользователи разочаровались или потратили драгоценное время, пытаясь понять, как работает ваша форма. С самого начала сделайте свою форму понятной, с видимыми подписями, расположенными за пределами пустых полей ввода. Формы являются важной частью многих целей конверсии, поэтому убедитесь, что ваши пользователи могут быстро и точно заполнить их.
Window.prompt () — Веб-API | MDN
window.prompt () указывает браузеру отобразить диалоговое окно с дополнительным сообщением, предлагающим пользователю ввести некоторый текст, и ждать, пока пользователь либо отправит текст, либо отменит диалоговое окно.
При некоторых условиях — например, когда пользователь переключает вкладки — браузер может фактически не отображать диалоговое окно или может не ждать, пока пользователь отправит текст или отменит диалоговое окно.
result = window.prompt (сообщение, по умолчанию);
Параметры
сообщение Дополнительно
Строка текста для отображения пользователю.Может быть опущено, если показывать нечего в окне подсказки.
по умолчанию Дополнительно
Строка, содержащая значение по умолчанию, отображаемое в поле ввода текста. Обратите внимание, что в Internet Explorer 7 и 8, если вы не укажете этот параметр, строка «undefined» — значение по умолчанию.
Возвращаемое значение
Строка, содержащая текст, введенный пользователем, или null .
let sign = prompt («Какой у вас знак?»); если (знак.toLowerCase () == "скорпион") { alert («Ух ты! Я тоже Скорпион!»); } знак = window.prompt (); знак = подсказка (); sign = window.prompt («Вам повезет?»); sign = window.prompt («Вам повезет?», «Конечно»);
Когда пользователь нажимает кнопку ОК, возвращается текст, введенный в поле ввода. Если пользователь нажимает кнопку ОК, не вводя никакого текста, возвращается пустая строка. Если пользователь нажимает кнопку Отмена, эта функция возвращает null .
Запрос выше выглядит следующим образом (в Chrome на OS X):
Диалоговое окно подсказки содержит однострочное текстовое поле, кнопку Отмена и кнопку ОК, а также возвращает (возможно, пустой) текст, введенный пользователем в это текстовое поле.
Диалоговые окна являются модальными окнами; Они запретить пользователю доступ к остальной части интерфейса программы, пока диалоговое окно закрыто. По этой причине не следует злоупотреблять функциями, создающими диалог. box (или модальное окно).
Обратите внимание, что результат — это строка. Это означает, что вам иногда следует приводить значение предоставленный пользователем. Например, если их ответом должно быть число, вы должны бросить значение для числа.
const aNumber = Число (window.подсказка ("Введите число", ""));
Таблицы BCD загружаются только в браузере
Получение пользовательского ввода в Python
Введение
Способ получения и обработки информации является одним из наиболее важных аспектов в духе любого языка программирования, особенно для информации, предоставляемой и получаемой от пользователя.
Python, хотя и относительно медленный в этом отношении по сравнению с другими языками программирования, такими как C или Java, содержит надежные инструменты для получения, анализа и обработки данных, полученных непосредственно от конечного пользователя.
В этой статье кратко объясняется, как можно использовать различные функции Python для получения информации от пользователя с помощью клавиатуры, с помощью некоторых фрагментов кода в качестве примеров.
Ввод в Python
Для получения информации через клавиатуру Python использует функции input () или raw_input () (подробнее о различиях между ними в следующем разделе). Эти функции имеют необязательный параметр, обычно известный как prompt , который представляет собой строку, которая будет выводиться на экран при каждом вызове функции.
Когда вызывается одна из функций input () или raw_input () , выполнение программы останавливается, пока пользователь не введет ввод через командную строку. Для фактического ввода данных пользователю необходимо нажать клавишу ENTER после ввода своей строки. При нажатии клавиши ENTER обычно вставляется символ новой строки («\ n»), но в данном случае этого не происходит. Введенная строка будет просто отправлена в приложение.
Любопытно отметить, что мало что изменилось в том, как эта функция работает между версиями Python 2 и 3, что отражено в работе input () и raw_input () , описанных в следующем разделе.
Сравнение функций input и raw_input
Разница при использовании этих функций зависит только от того, какая версия Python используется. Для Python 2 функция raw_input () используется для получения строкового ввода от пользователя через командную строку, в то время как функция input () , возвращаемая функцией, фактически оценивает входную строку и пытается запустить ее как код Python.
В Python 3 функция raw_input () устарела и заменена функцией input () и используется для получения строки пользователя с клавиатуры.А функция input () в Python 2 больше не поддерживается в версии 3. Чтобы получить ту же функциональность, которая была предоставлена функцией Python 2 input () , в Python необходимо использовать оператор eval (input ()) . 3.
Взгляните на пример функции raw_input в Python 2.
# Python 2 txt = raw_input ("Введите что-нибудь, чтобы проверить это:") print "Это то, что вы только что сказали?", txt
Выход
Введите что-нибудь, чтобы проверить это: Пусть Код будет с вами! Это то, что вы только что сказали? Да пребудет с вами Кодекс!
Точно так же взгляните на пример функции ввода в Python 3.
# Python 3 txt = input ("Введите что-нибудь, чтобы проверить это:") # Обратите внимание, что в версии 3 функция print () # требует использования скобок. print ("Это то, что вы только что сказали?", txt)
Выход
Введите что-нибудь, чтобы проверить это: Пусть Код будет с вами! Это то, что вы только что сказали? Да пребудет с вами Кодекс!
С этого момента в этой статье будет использоваться метод input из Python 3, если не указано иное.
Ввод строк и чисел
Функция input () по умолчанию преобразует всю полученную информацию в строку. Предыдущий пример демонстрирует это поведение.
Числа, с другой стороны, нужно явно обрабатывать как таковые, поскольку изначально они поступают как строки. В следующем примере демонстрируется получение информации о числовом типе:
# Запрашивается ввод и сохраняется в переменной test_text = input ("Введите число:") # Преобразует строку в целое число.Если тебе надо # для преобразования пользовательского ввода в десятичный формат, # функция float () используется вместо int () test_number = int (тест_текст) # Выводит в консоль переменную по запросу print ("Введенное вами число:", test_number)
Выход
Введите число: 13 Вы ввели номер: 13
Другой способ сделать то же самое:
test_number = int (input ("Введите число:"))
Здесь мы напрямую сохраняем ввод после немедленного преобразования в переменную.
Имейте в виду, что если пользователь на самом деле не вводит целое число, этот код вызовет исключение, даже если введенная строка является числом с плавающей запятой.
Обработка исключений на входе
Есть несколько способов убедиться, что пользователь вводит достоверную информацию. Один из способов — обработать все возможные ошибки, которые могут возникнуть при вводе данных пользователем.
В этом разделе мы продемонстрируем несколько хороших методов обработки ошибок при вводе данных.
Но сначала вот небезопасный код:
test2word = input («Назови свой возраст:») test2num = интервал (test2word) print ("Ух ты! Ваш возраст", test2num)
При запуске этого кода, допустим, вы вводите следующее:
Назовите свой возраст: Три
Здесь, когда функция int () вызывается со строкой «Три», генерируется исключение ValueError, и программа останавливается и / или аварийно завершается.
Теперь давайте посмотрим, как сделать этот код более безопасным для обработки пользовательского ввода:
test3word = input («Назови свой счастливый номер:») пытаться: test3num = int (test3word) print ("Это правильный номер! Ваш счастливый номер:", test3num) кроме ValueError: print («Это недопустимое число. Это вообще не число! Это строка, иди и попробуйте еще раз. Удачи в следующий раз!»)
Этот блок кода будет оценивать новый ввод. Если ввод — это целое число, представленное в виде строки, тогда функция int () преобразует его в правильное целое число.В противном случае будет сгенерировано исключение, но вместо сбоя приложения оно будет перехвачено и будет запущен второй оператор print .
Вот пример этого кода, работающего при возникновении исключения:
Назови свой счастливый номер: семь Это неверный номер. Это вообще не число! Это строка, иди и попробуй еще раз. Повезет в следующий раз!
Вот как в Python можно обрабатывать ошибки, связанные с вводом. Вы можете комбинировать этот код с другой конструкцией, например с циклом while, чтобы гарантировать, что код будет запускаться повторно до тех пор, пока вы не получите действительный целочисленный ввод, который требуется вашей программе.
Полный пример
# Делает функцию, которая будет содержать # желаемая программа. def example (): # Вызывает бесконечный цикл, который продолжает выполняться # пока не возникнет исключение в то время как True: test4word = input ("Как вас зовут?") пытаться: test4num = int (input («С 1 по 7, сколько часов вы играете на своем мобильном телефоне?»)) # Если что-то еще не является строкой # введена версия номера, # Будет вызвано исключение ValueError.кроме ValueError: # Цикл будет продолжаться до проверки print ("Ошибка! Это не число. Попробуйте еще раз.") # При успешном преобразовании в целое число # цикл закончится. еще: print («Впечатляет», test4word, «! Вы потратили», test4num * 60, «минут или», test4num * 60 * 60, «секунд на мобильном телефоне!») перерыв # Функция вызывается пример()
Результатом будет:
Как вас зовут? Фрэнсис С 1 по 7, сколько часов вы играете на своем мобильном телефоне? 3 Впечатляет, Фрэнсис! Вы провели на своем мобильном телефоне 180 минут или 10800 секунд!
Заключение
В этой статье мы увидели, как встроенные утилиты Python можно использовать для получения пользовательского ввода в различных форматах.Мы также увидели, как мы можем обрабатывать исключения и ошибки, которые могут возникнуть при получении пользовательского ввода.
Запрос ввода (подсказки) — документация prompt_toolkit 3.0.18
Эта страница посвящена построению подсказок. Куски кода, которые мы можем встроить в программа для запроса ввода у пользователя. Даже если вы хотите использовать prompt_toolkit для создания полноэкранных терминальных приложений это, вероятно, все еще хороший идея сначала прочитать это, прежде чем переходить в полноэкранный режим здания страница приложений.
На этой странице мы рассмотрим автозаполнение, выделение синтаксиса, привязки клавиш, и так далее.
Привет, мир
Следующий фрагмент является наиболее простым примером, в нем используется prompt () функция, запрашивающая у пользователя ввод и возвращает текст. Так же, как (raw_), введите .
из приглашения импорта prompt_toolkit text = prompt ('Введите данные:') print ('Вы сказали:% s'% текст)
Здесь мы получаем простую подсказку, которая поддерживает привязки клавиш Emacs, например readline, но дальше ничего особенного.Тем не мение, prompt () имеет множество параметров конфигурации. В следующих разделах мы узнаем обо всех этих параметрах.
Объект
PromptSession
Вместо вызова функции prompt () , она также возможно создание PromptSession экземпляр с последующим вызовом его prompt () метод для каждого ввода вызов. Это создает своего рода сеанс ввода.
из prompt_toolkit импорта PromptSession # Создать объект подсказки.сессия = PromptSession () # Сделайте несколько вызовов ввода. text1 = session.prompt () text2 = session.prompt ()
В основном это имеет два преимущества:
История ввода будет храниться между последовательными подсказка () звонков.
Экземпляр PromptSession () и его prompt () Метод о те же аргументы, что и все варианты, описанные ниже (выделение, доработка и т.д…). Итак, если вы хотите запросить несколько входов, но каждый входной вызов требует примерно тех же аргументов, их можно передать в PromptSession () , а они можно переопределить, передав значения в prompt () метод.
Подсветка синтаксиса
Добавить подсветку синтаксиса так же просто, как добавить лексер. Все лексеры Pygments можно использовать после их упаковки в Пигмент Лексер . Также возможно создать настраиваемый лексер путем реализации аннотации Lexer базовый класс.
из pygments.lexers.html import HtmlLexer из подсказки импорта prompt_toolkit.shortcuts из prompt_toolkit.lexers импортировать PygmentsLexer text = prompt ('Введите HTML:', lexer = PygmentsLexer (HtmlLexer)) print ('Вы сказали:% s'% текст)
Цветовая схема Pygments по умолчанию включена как часть стиля по умолчанию в prompt_toolkit.Если вы хотите использовать другой стиль Pygments вместе с лексером, вы можете сделать следующее:
из pygments.lexers.html import HtmlLexer из pygments.styles import get_style_by_name из подсказки импорта prompt_toolkit.shortcuts из prompt_toolkit.lexers импортировать PygmentsLexer из prompt_toolkit.styles.pygments import style_from_pygments_cls style = style_from_pygments_cls (get_style_by_name ('monokai')) text = prompt ('Введите HTML:', lexer = PygmentsLexer (HtmlLexer), style = style, include_default_pygments_style = Ложь) print ('Вы сказали:% s'% текст)
Мы передаем include_default_pygments_style = False , потому что в противном случае оба стили будут объединены, что, возможно, даст немного разные цвета в результате для случаев, когда в нашем собственном стиле Pygments не указан цвет.
Цвета
Цвета подсветки синтаксиса определяются Экземпляр стиля . По умолчанию нейтральный используется встроенный стиль, но любой экземпляр стиля может быть передан в prompt () функция. Простой способ создать стиль, с помощью from_dict () функция:
из pygments.lexers.html import HtmlLexer из подсказки импорта prompt_toolkit.shortcuts from prompt_toolkit.styles импортировать стиль из prompt_toolkit.lexers импортировать PygmentsLexer our_style = Стиль.from_dict ({ 'pygments.comment': '# 888888 полужирный', 'pygments.keyword': '# ff88ff полужирный', }) text = prompt ('Введите HTML:', lexer = PygmentsLexer (HtmlLexer), стиль = наш_стиль)
Словарь стилей очень похож на словарь стилей Pygments , с небольшими отличиями:
Параметры roman , sans , mono и border параметры игнорируются.
Стиль имеет несколько дополнений: blink , noblink , reverse и noreverse .
Цвета могут быть в формате # ff0000 , но они могут быть одним из встроенных Названия цветов ANSI тоже. В этом случае они отображаются непосредственно на 16 цветов. палитра терминала.
Подробнее о стилизации.
Использование стиля Pygments
Все классы стилей Pygments также могут использоваться, когда они обернуты через style_from_pygments_cls () .
Предположим, мы хотим использовать стиль Pygments, например пигментов.styles.tango.TangoStyle , это возможно так:
Создать собственный стиль можно так:
из подсказки импорта prompt_toolkit.shortcuts from prompt_toolkit.styles import Style, style_from_pygments_cls, merge_styles из prompt_toolkit.lexers импортировать PygmentsLexer из pygments.styles.tango импортировать TangoStyle из pygments.lexers.html import HtmlLexer our_style = merge_styles ([ style_from_pygments_cls (TangoStyle), Style.from_dict ({ пигменты.comment ':' # 888888 жирный ', 'pygments.keyword': '# ff88ff полужирный', }) ]) text = prompt ('Введите HTML:', lexer = PygmentsLexer (HtmlLexer), стиль = наш_стиль)
Раскрашивание самой подсказки
Можно добавить несколько цветов к самой подсказке. Для этого нам необходимо создать некоторый форматированный текст. Один из способов сделать это — создание списка кортежей стиля / текста. В следующем примере мы используем класс имена для обозначения стиля.
из prompt_toolkit.запрос на импорт ярлыков from prompt_toolkit.styles импортировать стиль style = Style.from_dict ({ # Пользовательский ввод (текст по умолчанию). '': '# ff0066', # Подсказка. 'username': '# 884444', 'at': '# 00aa00', 'двоеточие': '# 0000aa', 'фунт': '# 00aa00', 'host': '# 00ffff bg: # 444400', 'путь': 'ансициан подчеркивание', }) сообщение = [ ('класс: имя пользователя', 'Джон'), ('класс: в', '@'), ('класс: хост', 'локальный хост'), ('класс: двоеточие', ':'), ('класс: путь', '/ пользователь / джон'), ('класс: фунт', '#'), ] текст = приглашение (сообщение, стиль = стиль)
Сообщение может быть любым форматированным текстом, как описано здесь.Это также может быть вызываемый объект, который возвращает некоторый форматированный текст.
По умолчанию цвета берутся из 256 цветовой палитры. Если вы хотите иметь 24-битный истинный цвет, это возможно, добавив color_depth = ColorDepth.TRUE_COLOR вариант для prompt () функция.
из prompt_toolkit.output import ColorDepth text = prompt (сообщение, style = style, color_depth = ColorDepth.TRUE_COLOR)
Автозаполнение
Автозаполнение может быть добавлено путем передачи параметра завершения .Это должно быть экземпляром аннотации Completer базовый класс. WordCompleter является примером Комплектация, реализующая этот интерфейс.
из приглашения импорта prompt_toolkit from prompt_toolkit.completion импортировать WordCompleter html_completer = WordCompleter (['', '', '', '']) text = prompt ('Введите HTML:', completer = html_completer) print ('Вы сказали:% s'% текст) </pre><p> <code> WordCompleter </code> — это простой комплект завершает последнее слово перед курсором любым из заданных слов.</p><p> Примечание</p><p> Обратите внимание, что в prompt_toolkit 2.0 автоматическое завершение стало синхронным. Этот означает, что если вычисление завершений занимает много времени, то этот заблокирует цикл событий и обработку ввода.</p><p> Для алгоритмов тяжелого завершения рекомендуется заключать завершение в <code> ThreadedCompleter </code> для его запуска в фоновом потоке.</p><h4><span class="ez-toc-section" id="i-48"> Вложенное завершение </span></h4><p> Иногда у вас есть интерфейс командной строки, где завершение зависит от предыдущие слова из ввода.Примерами являются интерфейсы командной строки от маршрутизаторов и коммутаторов. Простого <code> WordCompleter </code> недостаточно в тот случай. Мы хотим иметь возможность определять завершения в нескольких иерархических уровни. <code> NestedCompleter </code> решает эту проблему:</p><pre> из приглашения импорта prompt_toolkit from prompt_toolkit.completion import NestedCompleter Completer = NestedCompleter.from_nested_dict ({ 'показывать': { 'версия': Нет, "часы": нет, 'ip': { 'интерфейс': {'краткий'} } }, "выход": нет, }) text = prompt ('#', completer = завершитель) print ('Вы сказали:% s'% текст) </pre><p> Всякий раз, когда в словаре есть значение <code> None </code>, это означает, что нет дальнейшее вложенное завершение в этот момент.Когда все значения словаря будут быть <code> Нет </code>, также может быть заменен комплектом.</p><h4><span class="ez-toc-section" id="i-49"> Комплектовщик нестандартный </span></h4><p> Для более сложных примеров имеет смысл создать пользовательский инструмент завершения. Для экземпляр:</p><pre> из приглашения импорта prompt_toolkit from prompt_toolkit.completion import Completer, Completion класс MyCustomCompleter (Завершитель): def get_completions (self, document, complete_event): yield Completion ('завершение', start_position = 0) текст = подсказка ('>', completer = MyCustomCompleter ()) </pre><p> Класс <code> Completer </code> должен реализовывать генератор с именем <code> get_completions () </code> который берет <code> Документ </code> и дает текущий <code> Завершение </code> экземпляра.Каждое завершение содержит часть текста и позицию.</p><p> Позиция используется для фиксации текста перед курсором. Нажатие клавиши табуляции может, например, переводить части ввода из нижнего регистра в верхний. Этот имеет смысл для завершителя без учета регистра. Или в случае нечеткого завершения, это может исправить опечатки. Когда <code> start_position </code> является чем-то отрицательным, эта сумма символов будут удалены и заменены.</p><h4><span class="ez-toc-section" id="i-50"> Стили индивидуальные доработки </span></h4><p> Каждое завершение может предоставлять собственный стиль, который используется при рендеринге. в меню завершения или на панели инструментов.Это возможно, если передать стиль каждому <code> Завершение экземпляра </code>.</p><pre> из prompt_toolkit.completion import Completer, Completion класс MyCustomCompleter (Завершитель): def get_completions (self, document, complete_event): # Отобразить это завершение черным на желтом. yield Completion ('завершение1', start_position = 0, ) # Подчеркнуть завершение. yield Completion ('завершение2', start_position = 0, ) # Укажите имя класса, по которому будет выполняться поиск в таблице стилей.yield Completion ('завершение3', start_position = 0, ) </pre><p> В примере «colorful-prompts.py» используется стиль завершения:</p><p> Наконец, можно передать форматированный текст для <code> отображает атрибут </code> из <code> Завершение </code>. Этот предоставляет всю необходимую свободу для отображения текста любым возможным способом. Это также можно комбинировать с атрибутом </code> стиля <code>. Например:</p><pre> из prompt_toolkit.completion import Completer, Completion из prompt_toolkit.formatted_text импорт HTML класс MyCustomCompleter (Завершитель): def get_completions (self, document, complete_event): Завершение урожая ( 'завершение1', start_position = 0, display = HTML ('<b> завершение </b> <ansired> 1 </ansired>'), ) </pre><h4><span class="ez-toc-section" id="i-51"> Нечеткое завершение </span></h4><p> Если одним из возможных вариантов завершения является «django_migrations», нечеткое завершение будет позволяют получить это, набрав только «djm», подмножество символов для этого нить.</p><p> Prompt_toolkit поставляется с <code> FuzzyCompleter </code> и <code> класс FuzzyWordCompleter </code>. Они обеспечивают средства для выполнения такого «нечеткого завершения». Первый может взять любой Завершение экземпляра и оберните его так, чтобы он стал нечетким завершителем. Второй один ведет себя как завернутый <code> WordCompleter </code> в <code> FuzzyCompleter </code>.</p><h4><span class="ez-toc-section" id="i-52"> Завершить при вводе </span></h4><p> Автозаполнение может генерироваться автоматически во время набора текста или когда пользователь нажимает клавишу табуляции.Это можно настроить с помощью <code> complete_ while_typing </code> вариант:</p><pre> text = prompt ('Введите HTML:', completer = my_completer, complete_ while_typing = Верно) </pre><p> Обратите внимание, что этот параметр несовместим с <code> enable_history_search </code> вариант. Причина этого в том, что привязки клавиш вверх и вниз будут конфликтовать иначе. Поэтому не забудьте отключить для этого поиск по истории.</p><h4><span class="ez-toc-section" id="i-53"> Асинхронное завершение </span></h4><p> Когда генерация доработок занимает много времени, лучше делать это в фоновый поток.Это возможно, если обернуть завершитель в <code> ThreadedCompleter </code>, но также передавая <cite> complete_in_thread = Истинный аргумент </cite>.</p><pre> текст = подсказка ('>', completer = MyCustomCompleter (), complete_in_thread = True) </pre><h3><span class="ez-toc-section" id="i-54"> Проверка ввода </span></h3><p> К подсказке может быть прикреплен валидатор. Это какой-то код, который проверит приемлем ли данный ввод, и он вернет его, только если это дело. В противном случае он покажет сообщение об ошибке и переместит курсор на заданный должность.</p><p> Валидатор должен реализовать <code> Валидатор </code> абстрактный базовый класс. Для этого требуется только один метод с именем <code> validate </code>, который берет <code> Документ </code> в качестве входных данных и поднимает <code> ValidationError </code> при сбое проверки.</p><pre> из prompt_toolkit.validation import Validator, ValidationError из подсказки импорта prompt_toolkit класс NumberValidator (Валидатор): def validate (self, document): text = document.text если текст, а не текст.isdigit (): я = 0 # Получить индекс первого нечислового символа. # Мы хотим переместить сюда курсор. для i, c в перечислении (текст): если не c.isdigit (): перерыв поднять ValidationError (message = 'Этот ввод содержит нечисловые символы', cursor_position = i) number = int (prompt ('Дайте число:', валидатор = NumberValidator ())) print ('Вы сказали:% i'% number) </pre><p> По умолчанию ввод подтверждается только тогда, когда пользователь нажимает клавишу ввода, но prompt_toolkit также может проверять в реальном времени при вводе:</p><pre> prompt ('Дайте число:', валидатор = NumberValidator (), validate_ while_typing = True) </pre><p> Если входная проверка содержит тяжелый код, интенсивно использующий ЦП, но вы не хотите заблокировать цикл событий, тогда рекомендуется обернуть класс валидатора в <code> ThreadedValidator </code>.</p><h4><span class="ez-toc-section" id="i-55"> Валидатор с вызываемого </span></h4><p> Вместо внедрения валидатора <code> </code> абстрактный базовый класс, также можно начать с простой функции и используйте метод класса <code> from_callable () </code>. Это проще и достаточно для 90% валидаторов. Выглядит как следует:</p><pre> из prompt_toolkit.validation import Validator из подсказки импорта prompt_toolkit def is_number (текст): вернуть text.isdigit () валидатор = Validator.from_callable ( is_number, error_message = 'Этот ввод содержит нечисловые символы', move_cursor_to_end = Верно) number = int (prompt ('Дайте число:', валидатор = валидатор)) print ('Вы сказали:% i'% number) </pre><p> Мы определяем функцию, которая принимает строку и сообщает, является ли она допустимым вводом или не возвращая логическое значение.<code> from_callable () </code> превращает это в <code> Экземпляр валидатора </code>. Обратите внимание, что установка положение курсора таким образом невозможно.</p><h3><span class="ez-toc-section" id="i-56"> История </span></h3><p> Объект <code> History </code> отслеживает все ранее введенные строки, чтобы стрелка вверх показывала ранее введенные Предметы.</p><p> Рекомендуемый способ - использовать <code> PromptSession </code>, в котором используется <code> InMemoryHistory </code> за весь сеанс по По умолчанию. В следующем примере есть история из коробки:</p><pre> из prompt_toolkit импорта PromptSession сессия = PromptSession () в то время как True: сеанс.Подсказка() </pre><p> Чтобы сохранить историю на диск, используйте <code> FileHistory </code> вместо значения по умолчанию <code> История Памяти </code>. Этот объект истории может быть передается либо в <code> PromptSession </code>, либо в <code> prompt () </code> функция. Например:</p><pre> из prompt_toolkit импорта PromptSession из prompt_toolkit.history импортировать FileHistory сессия = PromptSession (история = FileHistory ('~ / .myhistory')) в то время как True: session.prompt () </pre><h3><span class="ez-toc-section" id="i-57"> Автоматическое предложение </span></h3><p> Автоматическое предложение - это способ предложить пользователю некоторые варианты завершения ввода, например панцирь рыбы.</p><p> Обычно ввод сравнивается с историей, и когда есть еще одна запись начиная с данного текста, завершение будет показано серым текстом позади текущий ввод. Нажатие стрелки вправо <kbd> → </kbd> или <kbd> c-e </kbd> вставит это предложение, <kbd> alt-f </kbd> вставит первое слово предложения.</p><p> Примечание</p><p> Когда предложения основаны на истории, не забудьте поделиться одним <code> История </code> объекта между последовательными <code> подсказка () </code> звонков.Используя <code> PromptSession </code> сделает это за вас.</p><p> Пример:</p><pre> из prompt_toolkit импорта PromptSession из prompt_toolkit.history импорт InMemoryHistory из prompt_toolkit.auto_suggest импорт AutoSuggestFromHistory сессия = PromptSession () в то время как True: текст = session.prompt ('>', auto_suggest = AutoSuggestFromHistory ()) print ('Вы сказали:% s'% текст) </pre><p> Предложение не обязательно должно исходить из истории. Любая реализация <code> AutoSuggest </code> абстрактный базовый класс может быть передается как аргумент.</p><h3><span class="ez-toc-section" id="i-58"> Добавление правой подсказки </span></h3><p> Подсказка <code> () Функция </code> уже из коробки поддержка правильных подсказок. Люди, знакомые с ZSH, могли это узнать. как вариант <cite> RPROMPT </cite>.</p><p> Итак, аналогично добавлению нижней панели инструментов, мы можем передать аргумент <code> rprompt </code>. Это может быть обычный текст, форматированный текст или вызываемый, который либо возвращает.</p><pre> из приглашения импорта prompt_toolkit from prompt_toolkit.styles импортировать стиль example_style = Стиль.from_dict ({ 'rprompt': 'bg: # ff0066 #ffffff', }) def get_rprompt (): вернуть '<rprompt>' answer = prompt ('>', rprompt = get_rprompt, style = example_style) </pre><p> Функция <code> get_rprompt </code> может возвращать любой форматированный текст, например <code> HTML </code>. также можно передавать текст непосредственно к аргументу <code> rprompt </code> <code> prompt () </code> функция. Это не обязательно должно быть вызываемый.</p><h3><span class="ez-toc-section" id="_Vi"> Режим ввода Vi </span></h3><p> Prompt-toolkit поддерживает привязки клавиш Emacs и Vi, аналогично Readline.Функция <code> prompt () </code> будет использовать привязки Emacs По умолчанию. Это сделано потому, что в большинстве операционных систем также оболочка Bash по умолчанию использует привязки Emacs, и это более интуитивно понятно. Если же Vi привязка обязательна, просто передайте <code> vi_mode = True </code>.</p><pre> из приглашения импорта prompt_toolkit подсказка ('>', vi_mode = True) </pre><h3><span class="ez-toc-section" id="i-59"> Добавление пользовательских привязок клавиш </span></h3><p> По умолчанию каждое приглашение уже имеет набор привязок клавиш, реализующий обычное поведение Vi или Emacs.Мы можем расширить это, передав другой <code> KeyBindings </code> экземпляра для <code> key_bindings </code> аргумент приглашения <code> () </code> функция или класс <code> PromptSession </code>.</p><p> Пример приглашения, которое печатает <code> 'hello world' </code> при нажатии <kbd> Control-T </kbd>.</p><pre> из приглашения импорта prompt_toolkit из prompt_toolkit.application import run_in_terminal из prompt_toolkit.key_binding импорт KeyBindings bindings = KeyBindings () @ привязки.добавить ('c-t') def _ (событие): «Поздоровайся, когда нажата клавиша c-t». def print_hello (): print ('привет, мир') run_in_terminal (print_hello) @ bindings.add ('c-x') def _ (событие): "Выйти, когда нажата` c-x`. " event.app.exit () text = prompt ('>', key_bindings = привязки) print ('Вы сказали:% s'% текст) </pre><p> Обратите внимание, что мы используем <code> run_in_terminal () </code> для привязки первого ключа. Это гарантирует, что вывод оператора печати и приглашения не смешиваются. вверх. Если привязки клавиш ничего не печатают, то с этим можно работать напрямую. без функций вложенности.</p><h4><span class="ez-toc-section" id="i-60"> Включить привязку клавиш в соответствии с условием </span></h4><p> Часто некоторые привязки клавиш могут быть включены или отключены в соответствии с определенными условие. Например, привязки Emacs и Vi никогда не будут активны в в то же время, но можно переключаться между привязками Emacs и Vi при запуске время.</p><p> Чтобы включить привязку клавиш в соответствии с определенным условием, мы должны передать его <code> Фильтр </code>, обычно <code> Условие </code> экземпляра. (Подробнее о фильтры.)</p><pre> из приглашения импорта prompt_toolkit from prompt_toolkit.filters import Condition из prompt_toolkit.key_binding импорт KeyBindings bindings = KeyBindings () @Условие def is_active (): «Активируйте привязку клавиш только во второй половине каждой минуты». вернуть datetime.datetime.now (). second> 30 @ bindings.add ('c-t', filter = is_active) def _ (событие): # ... проходить подсказка ('>', key_bindings = привязки) </pre><h4><span class="ez-toc-section" id="_Emacs_Vi"> Динамическое переключение между Emacs и режимом Vi </span></h4><p> Приложение <code> </code> имеет режим редактирования <code> </code> атрибут.Мы можем изменить привязки клавиш, изменив этот атрибут с <code> EditingMode.VI </code> - <code> EditingMode.EMACS </code>.</p><pre> из приглашения импорта prompt_toolkit из prompt_toolkit.application.current import get_app из prompt_toolkit.enums импортировать EditingMode из prompt_toolkit.key_binding импорт KeyBindings def run (): # Создайте набор привязок клавиш. bindings = KeyBindings () # Добавить дополнительную привязку клавиш для переключения этого флага. @ bindings.add ('f4') def _ (событие): "Переключение между режимами Emacs и Vi." app = event.app если app.editing_mode == EditingMode.VI: app.editing_mode = EditingMode.EMACS еще: app.editing_mode = EditingMode.VI # Добавить панель инструментов внизу для отображения текущего режима ввода. def bottom_toolbar (): «Показать текущий режим ввода». text = 'Vi' если get_app (). edit_mode == EditingMode.VI else 'Emacs' возвращаться [ ('класс: панель инструментов', '[F4]% s'% текст) ] подсказка ('>', key_bindings = привязки, bottom_toolbar = bottom_toolbar) запустить() </pre><p> Подробнее о привязках клавиш…</p><h4><span class="ez-toc-section" id="i-61"> Использование контрольной области для завершения </span></h4><p> Популярное сокращение, которое люди иногда используют, чтобы использовать контрольное пространство для открытие меню автозаполнения вместо клавиши табуляции.Это можно сделать с помощью следующая привязка клавиш.</p><pre> кб = KeyBindings () @ kb.add ('c-пробел') def _ (событие): «Инициализировать автозаполнение или выбрать следующее завершение». buff = event.app.current_buffer если buff.complete_state: buff.complete_next () еще: buff.start_completion (select_first = False) </pre><h3><span class="ez-toc-section" id="i-62"> Другие варианты подсказок </span></h3><h4><span class="ez-toc-section" id="i-63"> Многострочный ввод </span></h4><p> Чтение многострочного ввода так же просто, как передача параметра <code> multiline = True </code>.</p><pre> из приглашения импорта prompt_toolkit подсказка ('>', multiline = True) </pre><p> Побочным эффектом этого является то, что клавиша ввода теперь вставляет новую строку вместо принятия и возврата ввода. Теперь пользователю нужно будет нажать <kbd> Meta + Введите </kbd>, чтобы принять ввод. (Или <kbd> Escape </kbd> с последующим <kbd> Введите </kbd>.)</p><p> Можно указать подсказку продолжения. Это работает, передавая <code> prompt_continuation </code>, можно вызвать <code> prompt () </code>.Эта функция должна возвращать форматированный текст или список из <code> (стиль, текст) </code> кортежа. Ширина возвращаемого текста не должна превышают заданную ширину. (Ширина поля подсказки определяется подсказка.)</p><pre> из приглашения импорта prompt_toolkit def prompt_continuation (ширина, номер_строки, is_soft_wrap): возвращаться '.' * ширина # Или: return [('', '.' * Width)] prompt ('многострочный ввод>', многострочный = True, prompt_continuation = prompt_continuation) </pre><h4><span class="ez-toc-section" id="i-64"> Передача значения по умолчанию </span></h4><p> Может быть задано значение по умолчанию:</p><pre> из приглашения импорта prompt_toolkit импорт getpass prompt ('Как тебя зовут:', default = '% s'% getpass.getuser ()) </pre><h4><span class="ez-toc-section" id="i-65"> Подставка для мыши </span></h4><p> Имеется ограниченная поддержка мыши для позиционирования курсора и прокрутки (в в случае больших многострочных входов) и для нажатия в меню автозаполнения.</p><p> Включение можно выполнить, передав параметр <code> mouse_support = True </code>.</p><pre> из приглашения импорта prompt_toolkit подсказка ('Как тебя зовут:', mouse_support = True) </pre><h4><span class="ez-toc-section" id="i-66"> Обмотка лески </span></h4><p> Перенос строк включен по умолчанию. Это то, к чему привыкло большинство людей и это то, что делает GNU Readline.Когда он отключен, входная строка будет прокрутите по горизонтали.</p><pre> из приглашения импорта prompt_toolkit подсказка ('Как тебя зовут:', wrap_lines = False) </pre><h4><span class="ez-toc-section" id="i-67"> Ввод пароля </span></h4><p> Когда установлен флаг <code> is_password = True </code>, ввод заменяется на звездочки (<code> * </code> символа).</p><pre> из приглашения импорта prompt_toolkit подсказка ('Введите пароль:', is_password = True) </pre><h3><span class="ez-toc-section" id="i-68"> Подсказка в приложении </span></h3><cite> asyncio </cite></h3><p> Примечание</p><p> Новое в prompt_toolkit 3.0. (В prompt_toolkit 2.0 это было возможно с помощью обходной путь).</p><p> Для приложений asyncio, очень важно никогда не блокировать цикл событий. Тем не мение, <code> prompt () </code> блокирует, и вызов этого вызовет заморозить все приложение. Asyncio даже не позволит нам запустить это функция в сопрограмме.</p><p> Ответ - позвонить <code> prompt_async () </code> вместо <code> подсказка () </code>. Асинхронный вариант возвращает сопрограммы и ожидает.</p><pre> из prompt_toolkit импорта PromptSession из prompt_toolkit.patch_stdout импорт patch_stdout async def my_coroutine (): сессия = PromptSession () в то время как True: с patch_stdout (): result = await session.prompt_async ('Скажи что-нибудь:') print ('Вы сказали:% s'% результат) </pre><p> Диспетчер контекста <code> patch_stdout () </code> необязательно, но рекомендуется, потому что другие сопрограммы могут печатать в стандартный вывод. Это гарантирует, что другой вывод не уничтожит приглашение.</p><h3><span class="ez-toc-section" id="i-69"> Чтение ключей из стандартного ввода, по одному ключу за раз, но без подсказки </span></h3><p> Предположим, вы хотите использовать prompt_toolkit для чтения ключей из stdin, один ключ за раз, но не выводить запрос на вывод, что также возможно:</p><pre> импорт asyncio из prompt_toolkit.вход импорт create_input from prompt_toolkit.keys импорт ключей async def main () -> Нет: done = asyncio.Event () input = create_input () def keys_ready (): для key_press в input.read_keys (): печать (key_press) если key_press.key == Keys.ControlC: done.set () с input.raw_mode (): с input.attach (keys_ready): ожидание готово.wait () если __name__ == "__main__": asyncio.run (главная ()) </pre><p> Приведенный выше фрагмент кода будет печатать объект <cite> KeyPress </cite> при каждом нажатии клавиши.Это также кроссплатформенный вариант, который должен работать в Windows.</p><table><h2><span class="ez-toc-section" id="_Linux"> Проект документации Linux </span></h2><td align="center" valign="top"> <br/><table border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#000000"><table border="0" cellpadding="3" cellspacing="1"><tr><td bgcolor="#BBCCEE" align="center"> <b> Информация о LDP </b></td></tr><tr><td bgcolor="#888888"> <b>–</b> FAQ <br/> <b>–</b> Манифест / лицензия <br/> <b>–</b> История <br/> <b>–</b> Волонтеры / сотрудники <br/> <b>–</b> Должностные инструкции <br/> <b>–</b> Списки рассылки <br/> <b>–</b> IRC <br/> <b>–</b> Обратная связь <br/></td></tr></table></td></tr></table> <br/><table border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#000000"><table border="0" cellpadding="2" cellspacing="1"><tr><td bgcolor="#BBCCEE" align="center"> <b> Автор / внесение вклада </b></td></tr><tr><td bgcolor="#888888"> <b>–</b> Руководство для авторов LDP <br/> <b>–</b> Внесите вклад / помогите <br/> <b>–</b> Ресурсы <br/> <b>–</b> Как отправить <br/> <b> - </b> Репозиторий GIT <br/> <b>–</b> Загрузок <br/> <b>–</b> Контакты <br/></td></tr></table></td></tr></table> <br/><table border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#000000"><table border="0" cellpadding="2" cellspacing="1"><tr><td bgcolor="#BBCCEE" align="center"> <b> Спонсор сайта LDP </b></td></tr><tr><td align="center" valign="center" bgcolor="#888888"></td></tr></table></td></tr></table></td><td align="center" valign="top"><table border="0" cellpadding="4" cellspacing="1"><tr align="left" valign="top" bgcolor="#FFFFFF"><td align="left" bgcolor="#FFFFFF"><table cellpadding="3" cellspacing="0" border="0"><tr><td align="center" valign="top" bgcolor="#BBCCEE"> <b> Мастерская </b></td></tr></table> <br/><table border="0" cellpadding="0" cellspacing="0"><tr><td valign="center"><table border="0" cellpadding="3" cellspacing="2"><tr><td valign="top" align="right"> <b> LDP Wiki </b>:</td><td valign="top" align="left"> LDP Wiki - это отправная точка для любой незавершенной работы <br/> Члены | Авторы | Посетители</td></tr></table></td></tr></table><table cellpadding="3" cellspacing="0" border="0"><tr><td align="center" valign="top" bgcolor="#BBCCEE"> <b> Документы </b></td></tr></table> <br/><table border="0" cellpadding="0" cellspacing="0"><tr><td valign="center"><table border="0" cellpadding="3" cellspacing="2"><tr><td valign="top" align="right"> <b> HOWTO </b>:</td><td valign="top" align="left"> тематическая справка <br/> последние обновления | основной индекс | просматривать по категориям</td></tr><tr><td valign="top" align="right"> <b> Руководства </b>:</td><td valign="top" align="left"> более длинные и подробные книги <br/> последние обновления / основной указатель</td></tr><tr><td valign="top" align="right"> <b> Часто задаваемые вопросы </b>:</td><td valign="top" align="left"> Часто задаваемые вопросы <br/> последние обновления / основной указатель</td></tr><tr><td valign="top" align="right"> <b> страницы руководства </b>:</td><td valign="top" align="left"> справка по отдельным командам (20060810)</td></tr><tr><td valign="top" align="right"> <b> Бюллетень Linux </b>:</td><td valign="top" align="left"> Интернет-журнал</td></tr></table></td><td valign="top"><table border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#000000"><table border="0" cellpadding="2" cellspacing="1"><tr><td bgcolor="#BBCCEE" align="center"> <b> Поиск / Ресурсы </b></td></tr><tr><td bgcolor="#888888"> <br/> <b>–</b> Ссылки <br/> <b>–</b> Поиск OMF</td></tr></table></td></tr></table></td></tr></table><table cellpadding="3" cellspacing="0" border="0"><tr><td align="center" valign="top" bgcolor="#BBCCEE"> <b> Объявления / Разное </b></td></tr></table><p> <br/> <b> <u> Обновления документов </u> </b> <br/> Ссылка на недавно обновленные HOWTO.</p></td></tr></table></td></table><h2><span class="ez-toc-section" id="_Bash_-_Linux"> Как мне запросить ввод в Bash? - Linux Подсказка </span></h2><p> Часто бывает необходимо выполнять вычисления в зависимости от ввода данных пользователем при создании сценария Bash. В этом руководстве, прежде чем выполнять базовую операцию со сценарием оболочки, давайте сначала взглянем на интерпретацию и проверку вводимых пользователем данных. Мы будем использовать встроенную команду чтения Bash для интерпретации пользовательского ввода Bash. Команда чтения принимает какое-то значение в качестве ввода через пользователя и присваивает его переменной.Он считывал только одну строку через командный терминал Bash. В этом руководстве вы узнаете, как интерпретировать ввод пользователя из терминала и скрипта.</p><p> Вот синтаксис для реализации команды чтения:</p><h3><span class="ez-toc-section" id="_01"> Пример 01: </span></h3><p> Давайте рассмотрим простой пример чтения ввода от пользователя в bash при запросе. Откройте терминал и создайте новый файл «input.sh».</p><p></p><p> Откройте файл и добавьте в него небольшой код, как показано ниже. Во-первых, оператор echo просит пользователя добавить входное значение.Оператор чтения используется для ввода пользовательского значения, которое будет сохранено в переменной «NAME». Последний оператор echo используется для печати ответа с введенным значением в виде переменной «$ NAME».</p><p></p><p> Запустите файл с помощью команды bash. Сначала он запросит имя. Когда пользователь вводит значение «Aqsa», он распечатывает сообщение со значением внутри него.</p><p></p><h3><span class="ez-toc-section" id="_02"> Пример 02: </span></h3><p> Откройте старый файл и напишите в него приведенный ниже код. Мы можем использовать встроенную команду чтения; пользователю с запросом, используя эту опцию -p.Вы должны вызвать, чтобы использовать ключевое слово «readline» -e, чтобы разрешить редактирование строки с помощью клавиш со стрелками. После этого используйте переменную для печати пути к файлу, введенному пользователем в командной оболочке.</p><p></p><p> Давайте проверим вывод этого кода с помощью команды bash в терминале. Вы увидите, что он попросит ввести путь к файлу в оболочке. Когда вы вводите необходимое значение и нажимаете Enter, он распечатывает его.</p><p></p><p> Если вы хотите предложить ответ, вы должны использовать ключевое слово «–i» после строки с путем в кавычках.</p><p></p><p> Давайте проверим вывод обновленного кода с помощью команды bash. Вы заметите, что он предложит вам путь к файлу, как показано ниже.</p><p></p><h3><span class="ez-toc-section" id="_03"> Пример 03: </span></h3><p> Давайте рассмотрим еще один пример запроса ввода в оболочке. Запишите приведенный ниже код в файл «input.sh». У нас есть две команды чтения для добавления учетных данных пользователя в оболочку. Ключевое слово «-sp» используется, чтобы скрыть учетные данные «Пароль» при входе в оболочку.</p><p></p><p> При выполнении вы можете увидеть, что пользователь ввел свои учетные данные, в то время как пароль скрыт при вводе.В конце концов, он отобразил сообщение об оплате благодаря пользователю.</p><p></p><h3><span class="ez-toc-section" id="_04"> Пример 04: </span></h3><p> У нас есть еще один пример чтения нескольких имен автомобилей как значений из пользовательской оболочки bash. Для этого нам потребовались три переменные: «car1», «car2» и «car3». У нас есть эхо-комментарий, в котором запрашиваются названия автомобилей. Команда чтения используется для чтения введенных пользователем значений (названий автомобилей) в оболочке. Следующие три оператора эха будут последовательно выводить сообщения с названиями автомобилей.</p><p></p><p> Запустите файл с помощью команды bash. Он запросит названия понравившихся автомобилей. Когда пользователь вводит названия автомобилей последовательно, он сохраняет их в переменных команды чтения и распечатывает их, используя следующие три оператора эха один за другим.</p><p></p><h3><span class="ez-toc-section" id="_05"> Пример 05: </span></h3><p> В приведенном выше примере мы видели, как запрашивать ввод данных пользователем при сохранении ввода в трех переменных. В этом примере мы узнаем, как читать значения, введенные пользователем в одну переменную, как элементы массива, используя ключевое слово «-a».Итак, откройте тот же файл и напишите в нем приведенный ниже код. Оператор echo попросит вас ввести требуемый ввод. В операторе чтения есть ключевое слово «-a», чтобы принимать от пользователя несколько значений и сохранять их в одном массиве переменных «NAMES». В последнем операторе echo все введенные значения печатаются как элементы массива в текстовой строке.</p><p></p><p> При запуске файла «input.sh» пользователю было предложено ввести значения. Когда пользователь вводит значения, эти значения сохраняются в переменной массива «NAMES».После сохранения этих значений будет выполнен оператор echo, который распечатает введенные имена в виде значений массива внутри себя, как показано.</p><p></p><h3><span class="ez-toc-section" id="_06"> Пример 06: </span></h3><p> Возьмем тот же файл с небольшими изменениями в скрипте. Мы написали две команды чтения для получения значения от пользователя в качестве ввода в оболочке и сохранили их в двух переменных: «NUM1» и «NUM2». После этого обе переменные были распечатаны.</p><p></p><p> В командном терминале напишите команду Chmod, чтобы назначить этому файлу права на выполнение.</p><p></p><p> Когда вы запустите этот файл с помощью bash, вы увидите, что он предложит вам последовательно добавлять числа. Когда вы вводите требуемые значения, он распечатывает оба числа по отдельности.</p><p></p><p> Если вы хотите убедиться, что какое-либо поле или переменная оставлено пустым пользователем, вы можете обновить предыдущий код, как показано ниже. Ключевое слово «-z» используется для проверки обеих переменных, если в них есть пробелы.</p><p></p><p> Во время выполнения пользователь добавил пробел как число.Пользователь получил сообщение, чтобы повторить попытку, потому что в переменной, введенной пользователем, есть пробелы.</p><p></p><p> Давайте попробуем тот же код с некоторыми условиями для чисел, введенных пользователем. Если пользователь вводит какой-либо символ, кроме упомянутых в приведенном ниже коде, он передаст сообщение.</p><p></p><p> Пробуя этот код, пользователь добавил один специальный символ, который генерирует подсказку.</p><p></p><h3><span class="ez-toc-section" id="i-70"> Заключение </span></h3><p> В этом руководстве вы успешно научились запрашивать ввод данных пользователем в оболочке и интерпретировать вводимые пользователем данные, используя несколько очень простых примеров.</p><h2><span class="ez-toc-section" id="_PowerShell"> Отличный способ получить входные данные для ваших сценариев PowerShell </span></h2><p> Используя командлет PowerShell Read-Host, вы можете интерактивно запрашивать ввод от пользователя скрипта. Давайте посмотрим, как можно использовать командлет PowerShell <code> Read-Host </code> в некоторых реальных приложениях.</p><h3><span class="ez-toc-section" id="i-71"> Запрос ввода с помощью узла чтения </span></h3><p> Командлет <code> Read-Host </code> выполняет две функции в сценарии PowerShell; он приостанавливает выполнение и получает ввод. Это оно. <code> Read-Host </code> - это простой командлет, но он может пригодиться, когда нужно получить информацию от пользователя сценария.</p><p> По сути, командлет <code> Read-Host </code> просто требует использования параметра <code> Prompt </code>. Этот параметр <code> Prompt </code> позволяет вам дать пользователю сценария некоторую индикацию относительно того, что вводить. Например, если вашему сценарию требуется имя сервера, вы можете использовать <code> Read-Host </code>, чтобы предложить пользователю ввести это имя при запуске сценария.</p><p> Ниже вы можете увидеть, что при выполнении <code> Read-Host </code> в самой консоли PowerShell с помощью параметра <code> Prompt </code> PowerShell останавливает все выполнение и отображает мое оперативное сообщение, дающее пользователю поясняющее сообщение о том, что нам нужно.</p> Приглашение Read-Host PowerShell<p> Давайте включим это в сценарий. Всякий раз, когда пользователь вводит информацию в командной строке, <code> Read-Host </code> возвращает эту информацию обратно в ваш код. Вы можете легко получить эту информацию, присвоив выход переменной. Возможно, я хотел бы спросить имя сервера, а затем что-нибудь сделать с этим именем сервера. В противном случае я хотел бы отправить пользователю предупреждение, чтобы он знал, что мне действительно очень нужно это имя сервера.</p><pre> <code lang="powershell"> $ serverName = Read-Host -Prompt 'Имя сервера для обработки' if ($ serverName) { Write-Host «Теперь мы можем использовать имя сервера [$ serverName] в нашем коде» } еще { Write-Warning -Message "Имя сервера не введено." } </code> </pre><p> Используя простую конструкцию if / then, я могу быть уверен, что мой пользователь вводит имя сервера. Как только они это сделают, я могу захватить его и что-то с ним сделать, иначе отправить предупреждающее сообщение.</p> Предупреждение при отсутствии ввода<h3><span class="ez-toc-section" id="i-72"> Запрос паролей </span></h3><p> Вы должны знать, что хранить пароли в виде обычного текста в сценариях - не лучшая идея. Точно так же никогда не стоит хранить пароли в памяти в виде обычного текста. Чтобы обойти это, в PowerShell есть концепция, называемая защищенной строкой, которая представляет собой простую зашифрованную строку.</p><p> Защищенная строка может содержать любую конфиденциальную информацию; пароль - отличный пример. При чем здесь <code> Read-Host </code>? Командлет <code> Read-Host </code> имеет параметр <code> AsSecureString </code>, который позволяет пользователю не только сохранять вывод в виде защищенной строки, но и отображать звездочку во время набора текста, чтобы скрыть свой секрет от посторонних глаз!</p><p> Допустим, у меня есть глубокий, темный секрет, о котором я не хочу никому рассказывать, но мне нужно передать этот пароль какой-то программе.Как видно ниже, когда я не использую <code> AsSecureString </code>, вы меня поймали! Однако, если я использую <code> AsSecureString </code>, мой секрет в безопасности, поскольку каждый набираемый мной символ заменяется звездочкой, а вывод сохраняется в виде защищенной строки, а не простой текстовой строки.</p> Принятие защищенного ввода с помощью Read-Host<p> Чтобы обратиться к документации <code> Read-Host </code>, ознакомьтесь с документацией Microsoft.</p><p><h4></h4><em> Связанные </em></h4></p><h2><span class="ez-toc-section" id="_PROMPT"> Лечение речевых подсистем при апраксии речи у детей с тактильным вводом: подход PROMPT </span></h2><p> <strong> Цель: </strong> Подсказки для реструктуризации оральных мышечных фонетических целей (PROMPT; Hayden, 2004; Hayden, Eigen, Walker, & Olsen, 2010) - подход к лечению для улучшения звуковых расстройств речи у детей с использованием тактильно-кинестетико-проприоцептивных сигналов (TKP).</div></div></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/grazhdansko-pravovoe-grazhdansko-pravovaya-otvetstvennost-ponyatie-osnovanie-i-usloviya-vozniknoveniya-vidy-osvobozhdenie-ot-grazhdansko-pravovoj-otvetstvennosti-otvetstvennost-bez-viny.html" rel="prev">Гражданско правовое – Гражданско-правовая ответственность: понятие, основание и условия возникновения, виды. Освобождение от гражданско-правовой ответственности. Ответственность без вины — Гражданское право (Общая часть)</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/tekst-test-test-5-tekst-smyslovaya-i-kompozicionnaya-lostnost-teksta-posledovatelnost-predlozhenii-v-tekste-sredstva-svyazi-variant-1.html" rel="next">Текст тест – Тест 5. Текст: Смысловая и композиционная целостность текста. Последовательность предложений в тексте. Средства связи. Вариант 1</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/podskazka-input-podskazyvayushhij-tekst-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='20513' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><div id="sidebar-primary" class="widget-area sidebar " role="complementary"><div class="sidebar-main"><div id="yandex_rtb_R-A-744004-7" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript"> window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_R-A-744004-7",blockId: "R-A-744004-7",pageNumber: 11,onError: (data) => { var g = document.createElement("ins"); g.className = "adsbygoogle"; g.style.display = "inline"; g.style.width = "300px"; g.style.height = "600px"; g.setAttribute("data-ad-slot", "9935184599"); g.setAttribute("data-ad-client", "ca-pub-1812626643144578"); g.setAttribute("data-alternate-ad-url", "https://chajnov.ru/back.php"); document.getElementById("yandex_rtb_[rtbBlock]").appendChild(g); (adsbygoogle = window.adsbygoogle || []).push({}); }})}); window.addEventListener("load", () => { var ins = document.getElementById("yandex_rtb_R-A-744004-7"); if (ins.clientHeight == "0") { ins.innerHTML = stroke2; } }, true); </script><section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/"><div class="form-content"> <input type="text" placeholder="search.." name="s" id="s" value=""/> <input type="submit" value="Search" /></div></form></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Рубрики</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li><li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li><li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li><li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li><li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">Верстка</a></li><li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">Идеи</a></li><li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">С чего начать</a></li><li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Советы</a></li><li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Шаблоны</a></li><li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Разное</a></li></ul></div></div></section></div></div></div></div><footer id="zita-footer"><div class="footer-wrap widget-area"><div class="bottom-footer"><div class="bottom-footer-bar ft-btm-one"><div class="container"><div class="bottom-footer-container"> © Компания <a href="http://вебджем.рф"> Вебджем.рф </a> 2009 - 2024 | Все права защищены.</a></div></div></div></div></div></footer> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script>  <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>  <script defer src="https://xn--90abhccf7b.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_b4a02ea7ab06cfcb8e144b512c939c55.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="fab432a4e16806d1ca6eb85c-|49" defer></script>

Элемент
<input>	10+	10+	11+	Да	5+	4+
<textarea>	10+	10+	11.5+	Да	5+	4+

Элемент
<input>	2.3+	4+	11+	5+
<textarea>	2.3+	4+	11+	5+

Спецификация	Статус
HTML 5 (W3C)	Рекомендация (input-placeholder)
HTML 5 (W3C)	Рекомендация (textarea-placeholder)
HTML 5.1 (W3C)	Рекомендация (input-placeholder)
HTML 5.1 (W3C)	Рекомендация (textarea-placeholder)