Автозаполнение форм - это функция, которая позволяет автоматически вводить в формах на сайтах личную информацию, например ваше имя, адрес, электронную почту или телефон. По умолчанию в Яндекс.Браузере автозаполнение включено .
Автозаполнение удобно, но, чтобы подставить ваши данные в формы, браузеру нужно хранить их на компьютере. Если на компьютер проникнет вредоносное ПО, злоумышленник может украсть ваши данные. А если во время вашего отсутствия посторонний человек откроет браузер, он сможет авторизоваться на сайтах под вашим именем или узнать ваши данные другим способом. Поэтому, если для вас безопасность ваших данных намного важнее удобства, возможно, вам стоит отключить автозаполнение.
Внимание. Если вы хотите, чтобы данные автозаполнения на конкретном сайте не сохранялись в браузере, используйте режим Инкогнито . При необходимости вы можете отключить автозаполнение форм в браузере.
При первом вводе информации в форму (например, адреса или номера телефона) браузер запоминает ее. При повторном вводе в поле появляется список, из которого можно выбрать ранее сохраненный вариант автозаполнения.
Задать данные автозаполнения вручнуюВы можете создать варианты автозаполнения для адреса и банковской карты вручную. В этом случае вы сможете их редактировать.
Создать вариант автозаполнения Отредактировать вариант автозаполнения Удалить вариант автозаполнения
Удалить данные автозаполнения Отключить автозаполнение форм Автозаполнение поискового запросаЗапросы в «Умной строке» браузера
По умолчанию в браузере сохраняется история запросов. При повторном вводе они выделяются точкой справа.
","hasTopCallout":true,"hasBottomCallout":false,"areas":[{"shape":"circle","direction":["top","right"],"alt":"Сохраненный поисковой запрос","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false}]}}">
Чтобы удалить сохраненные в браузере поисковые запросы:
Запросы в поисковой строке ЯндексаЕсли вы авторизованы в Яндексе, то ваши запросы сохраняются по умолчанию – при повторном вводе они будут выделены фиолетовым. Кроме этого, сайты, на которые вы часто заходите, отображаются первыми в списке поисковых подсказок.
","hasTopCallout":true,"hasBottomCallout":false,"areas":[{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"circle","direction":["top","right"],"alt":"Сохраненные поисковые запросы","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false}]}}">
Отключить сохранение запросов в поиске Яндекса и часто посещаемых сайтов вы можете на странице .
Как уже говорилось в анонсе этой заметки, при вводе в поле какого-либо значения пользователю предлагаются на выбор варианты. При нажатии на один из них, значение записывается в поле и пользователь может переходить к следующему. Посмотрите видео:
Данные для подстановки мы заранее указываем с помощью JavaScript. Затем активируем плагин для определенного поля.
Плюс решения в том, что можно использовать разные переменные для нескольких полей.
C какими полями использовать автозаполнение?По идее, плагин автозаполнения призван заменить большие длинные списки на один маленький инпут.
Что касается страницы оформления заказа, то это может быть город доставки из списка доступных. Для формы поиска это могут быть наиболее популярные запросы, которые вы соберете через Яндекс.Метрику или статистику поиска по магазину .
Главная задача сводится к заполнению переменной данными, которые будут подставляться в поле формы.
Как предоставить данные для выбора?Для этого мы воспользуемся JavaScript. Если вы не обладаете навыками программирования на этом языке, не расстраивайтесь, они вам не понадобятся. Просто следуйте инструкции. Откройте любой текстовый редактор, подойдет даже "Блокнот":
После готовности страницы, определим массив city и добавим в него список городов через запятую:
$(document).ready(function(){ var city = new Array("Москва", "Санкт-Петербург", "Хабаровск"); });
Как видите, все просто: данные указываются в кавычках через запятую. Их может быть много.
Не закрывайте и не сохраняйте файл в блокноте. В следующем пункте мы добавим в него инициализацию плагина.
Подключение плагина jquery.autocomplete.packВ первую очередь необходимо скачать и подключить плагин. В данной статье говорится о версии . Чтобы подключить актуальную версию плагина, перейдите на сайт Autocomplete Plugin.
После того, как скачали скрипт, подключите его в шаблон той страницы, где располагается форма. В нашем примере это шаблон страницы служебных форм при условии ... . Перед закрывающим тегом добавьте:
Для корректного отображения нам понадобятся и CSS стили. Добавьте следующие стили в CSS интернет магазина:
Ac_results { padding: 0px; border: 1px solid black; background-color: white; overflow: hidden; z-index: 99999; } .ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; } .ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; font: menu; font-size: 12px; line-height: 16px; overflow: hidden; } .ac_loading { background: white url("/img/indicator.gif") right center no-repeat; } .ac_odd { background-color: #eee; } .ac_over { background-color: #0A246A; color: white; }
Также добавьте в папку /img изображение indicator.gif .
Теперь давайте вернемся к нашему блокноту:
Теперь сохраняем наш файл. Я назвал его ac-city.txt. и задал кодировку UTF-8:
Конечно, мы не можем использовать файл с расширением.txt как скрипт, поэтому нажмите по кнопке "Переименовать" напротив файла и измените расширение на.js:
