Браузеры могут помогать вам заполнять поля и формы, сохраняя данные, которые вы вводите на веб-страницах (логины, пароли, номера телефонов). Чтобы браузер не сохранял эти данные, отключите эту возможность в настройках браузера.
Internet ExplorerОпределите версию браузера:
Примечание. Чтобы определить версию браузера, просто перейдите на страницу
или воспользуйтесь инструкцией ниже.В меню браузера выберите пункт Справка (Help). Строка меню может быть скрыта — нажмите клавишу Alt , чтобы увидеть ее.
В открывшемся меню выберите пункт О программе (About Internet Explorer).
В открывшемся окне версию используемого браузера можно видеть в поле Версия (Version).
Internet Explorer 10
Internet Explorer 9
Internet Explorer 8
Internet Explorer 7
Internet Explorer 6
Данные веб-форм (Form data) и Пароли Удалить (Delete).
В окне Настройка автозаполнения
Чтобы удалить данные, которые браузер уже запомнил, нажмите кнопку Удалить историю автозаполнения (Delete AutoComplete history). Затем отметьте флажки Данные веб-форм (Form data) и Пароли (Passwords) и нажмите кнопку Удалить (Delete).
Отключение автозаполнения:
Удаление данных, которые браузер уже запомнил:
Очистить формы (Clear Forms) и Очистить пароли (Clear Passwords).
Чтобы удалить данные, которые браузер уже запомнил, в настройках автозаполнения нажмите кнопки Очистить формы (Clear Forms) и Очистить пароли (Clear Passwords).
FirefoxОтключение автозаполнения:
Opera 10 и вышеOpera 10, 11 и 12
Чтобы удалить данные, которые браузер уже сохранил, откройте соответствующие формы кнопками Управление сохранёнными паролями и Управление настройками автозаполнения и удалите отдельные записи.
Предыдущие версии Opera позволяют сохранять только пароли и некоторые личные данные для автозаполнения. Чтобы отключить эту возможность, следуйте приведенным инструкциям.
Чтобы удалить данные, которые браузер уже запомнил:
ChromeОтключение автозаполнения:
Чтобы удалить данные, которые браузер уже запомнил:
SafariВыберите меню настроек Safari (значок в виде шестеренки в правом верхнем углу), затем Настройки . Перейдите в раздел Автозаполнение и снимите флажки Из моей карточки в Адресной книге и Другие формы .
Чтобы удалить данные, которые браузер уже запомнил, нажмите на кнопку Правка (рядом с полем Другие формы ). В
строки и нажмите Удалить , либо удалите сразу весь список с помощью кнопки Удалить все .Привет! Сегодня вы узнаете как можно очень просто и быстро отключить авто-заполнение форм в браузере Яндекс. Вы наверняка замечали, что при входе на сайт, который вы часто посещаете, форма входа автоматически заполняется вашими данными. То есть, вам не нужно постоянно вводить свои данные. Браузер сохраняет ваши данные и предоставляет их вам при необходимости.
Авто-заполнение может работать при регистрации, оформлении заказа, бронировании и т.д. Функция удобная, но, вам лучше отключить её, если вы используете рабочий компьютер и кто-то ещё может пользоваться вашим компьютером.
Для настройки данного параметра, откройте браузер Яндекс. Вверху страницы справа, нажмите на значок в виде трёх горизонтальных линий. В открывшемся окне нажмите на вкладку — Настройки .
— Авто-заполнение форм одним кликом.
— Сохранять пароли для сайтов.
— Включить защиту от фишинга.
Обратите внимание! Вы можете настроить авто-заполнение форм. Возле данного параметра, нажмите на кнопку — Настроить . У вас откроется окно. Здесь вы можете:
— Добавить свой адрес.
— Добавить реквизиты банковской карты.
Далее, на странице добавления адреса, вы можете добавить адрес, который будет автоматически заполняться в формах. Например, при регистрации на сайте или оформления заказа и т.д. То же самое с реквизитами карты.
Всё готово! Вот так просто и быстро вы можете включить или отключить функцию авто-заполнения форм в браузере Яндекс!
- Перевод
Многим известно, что в мобильной версии Safari можно отсканировать свою банковскую карту. Но многие ли разработчики умеют создавать формы, поддерживающие эту возможность?
Готов поспорить, что немногие.
Дело осложняет полное отсутствие документации от Apple по работе этой функции. Но тут есть один момент. Функция сканирования банковских карт является подмножеством автозаполнения - браузерного функционала, давно игнорируемого веб-разработчиками. Понятно, почему они не уделяли ему должного внимания: когда регулярно заполняешь форму тестовыми данными, автозаполнение обычно мешает. Но для наших пользователей это важная функция. В Google выяснили, что при использовании автозаполнения пользователи на 30% быстрее заполняют формы . Так что давайте изучим работу автозаполнения, разберёмся, как создавать формы, поддерживающие кросс-браузерное автозаполнение, и воспользуемся преимуществами новых возможностей наподобие сканирования банковских карт.
Как работает автозаполнение? До недавнего времени не существовало стандартов, регламентирующих реализацию автозаполнения. В каждом браузере это делалось по-своему, и было доступно очень мало документации, описывающей браузерный механизм определения контента, который нужно внести в то или иное поле.Несмотря на такую анархию, можно выделить два основных подхода:
1. Поля с заранее заданным автозаполнением
Chrome, Opera и Safari обнаруживают наиболее важные поля в форме и позволяют выбирать, какими данными браузер должен автоматически их заполнить. К примеру, Opera умеет автоматически заполнять адреса и реквизиты банковских карт. Эта функциональность настраивается здесь:
Каждый из трёх браузеров имеет свой набор полей, к которым может применить автозаполнение, но поддержка основных полей платёжных форм реализована практически везде.
Для использования автозаполнения большинству пользователей не придётся обращаться к этим настройкам. Браузер отслеживает заполнение человеком форм и, когда распознаёт поля для адреса и реквизитов банковской карты, спрашивает, нужно ли сохранить введённые данные для последующего использования.
2. Автозаполнение любых полей
Если предыдущий подход можно сравнить со скальпелем, применяемым к заранее выбранным полям, то этот сродни бензопиле, режущей всё на своём пути.
Microsoft Edge и Firefox после отправки заполненной формы сохраняют все введённые данные вместе со значением атрибута name . Если в будущем браузер встретит поле с таким же атрибутом name , то к нему будет применено автозаполнение. В дополнение к name Firefox также обращает внимание на атрибут id .
У этого подхода есть проблемы с безопасностью и приватностью, поэтому давно поддерживается значение off , отключающее автозаполнение, чтобы браузер не хранил и автоматически не заполнял деликатную информацию.
Какой подход лучше?
Хотя второй подход позволяет работать с большим количеством полей, я как разработчик предпочитаю вариант с заранее заданными полями. Так гораздо проще определять, какую информацию должен заполнять браузер, да и легче настраивать тестовые профили.
Кроме того, при втором подходе вам нужно сначала отправить заполненную форму, чтобы браузер сохранил у себя данные для последующего автозаполнения. Без отправки он не запомнит введённую вами информацию. Также мне неприятно думать, что браузер может хранить реквизиты моей банковской карты в незашифрованном виде, если не определит тип поля.
Разумеется, Microsoft и Mozilla заинтересованы в обеспечении безопасности и приватности, и я уверен, что они предусмотрели какие-то защитные механизмы. Но лично мне гораздо спокойнее видеть в настройках браузера, что он распознаёт и чётко отделяет данные по банковской карте.
Учитывая всё сказанное, я не знаю предпочтений конечных пользователей. Вторая система может применяться шире, но я видел немало обращений в службу поддержки, когда люди пытались убрать данные автозаполнения из истории браузера.
Будет интересно посмотреть, как изменятся Edge и Firefox после того, как начнут поддерживать новый стандарт автозаполнения.
Поведение, которое нужно отслеживать
Иногда браузерам требуется более одного поля определённого типа, чтобы предложить вам варианты автозаполнения. Например, ниже показано, как Safari не станет автоматически заполнять одиночное поле имени владельца банковской карты, но если рядом есть поле для номера карты, то браузер предложит это сделать.
Тем не менее, если присутствует только поле номера карты, Safari предложит его заполнить. Согласно моему опыту, из-за этого поведения браузера бывает непросто тестировать отдельные ситуации с одиночными полями. Однажды во время тестирования я столкнулся с тем, что Opera потребовала наличия трёх полей для применения автозаполнения, но больше мне не удалось воспроизвести такое поведение.
Если ваша форма создана с поддержкой автозаполнения (об этом ниже), то пользователи не должны встречаться с такими ситуациями. Я просто упоминаю это на случай, если вы также встретите подобные странности в процессе отладки и тестирования автозаполнения.
Использование стандартов при реализации автозаполнения К счастью, ситуация с автозаполнением улучшается. Недавно в HTML5 был расширен атрибут autocomplete , подсказывающий браузеру, какие данные нужно вводить в разные поля. Этот атрибут существует уже несколько лет и сначала мог принимать два значения: on и off . По умолчанию autocomplete имеет значение on , то есть браузер может сохранять отправленные данные и автоматически заполнять поля. Но для некоторых полей автозаполнение нежелательно. В этом случае атрибуту autocomplete можно присвоить значение off , говорящее браузеру, что это поле заполнять не надо.Недавно были добавлены новые значения атрибута - autofill detail tokens . Эти токены помогают браузеру понять, какая информация нужна для заполнения поля.
Один из типов токенов называется autofill field names (наименования полей автозаполнения) . Они говорят браузеру, какой тип информации вводится в поле. К примеру, один из токенов этого типа - organization . Вот что о нём сказано в спецификации HTML5:
Наименование компании, относящееся к человеку, адресу или контактной информации в других полях, связанных с этим полем.
Пример поля с автоматическим заполнением названия организации будет выглядеть так:
В спецификации HTML5 есть огромная таблица, где перечислены все 53 возможных наименования поля автозаполнения , указано их назначение и типы инпутов, с которыми их можно использовать.
Это простейший вид автозаполнения, но оно становится мощнее и сложнее.
Доставка и биллинг
Значением атрибута autocomplete является разделённый пробелами список токенов. К примеру, если вы хотите собрать данные для доставки товара, то перед значением атрибута нужно добавить токен shipping:
Токен billing работает точно так же, как shipping .
Телефоны, электронная почта и ники в мессенджерах
Для номеров телефонов, адресов электронных почт и ников в мессенджерах используется другой вариант токена. Для таких случаев предусмотрен опциональный токен, обозначающий, что в поле нужно ввести номер домашнего (home), рабочего (work), мобильного (mobile) телефона, факса (fax) или пейджера (pager).
Например:
Общие и уточняющие наименования полей автозаполнения
Для многих типов информации в спецификации определены общие (broad) и уточняющие (narrow) наименования полей автозаполнения. Скажем, в дополнение к единственному полю для ввода номера телефона tel можно использовать:
- tel-country-code
- tel-national
- tel-area-code
- tel-local
- tel-local-prefix
- tel-local-suffix
- tel-extension
В целом авторам рекомендуется использовать общие наименования, а не уточняющие, поскольку последние навязывают западные стандарты. Например, в ряде стран принято сначала писать имя, а потом фамилию, в то время как во многих других странах принято писать наоборот - сначала фамилию, потом имя. Также немало стран, где используется одно лишь имя (мононим). Поэтому использование одного поля ввода является более гибким подходом.
Я согласен с этой рекомендацией. С практической точки зрения это означает, что важно уделять внимание таблице значений и выбирать правильное наименование для каждого поля.
Разделы (Sections)
Последним свойством новых токенов атрибута autocomplete является возможность назначать групповым полям произвольные разделы. Он определяется с помощью токена, начинающегося с section- . После дефиса можете писать что угодно. В спецификации приведён такой пример разделов:
Ship the blue gift to...
Address:
City:
Postal Code:
Ship the red gift to...
Address:
City:
Postal Code:
Все токены
Итак, теперь у нас есть гораздо более сложный набор токенов для атрибута autocomplete . И здесь важен порядок следования токенов.
Во-первых, вы используете либо значения on и off , либо наименования полей автозаполнения - одновременно и то и другое нельзя.
При использовании токенов автозаполнения они должны следовать в таком порядке:
(optional) (optional) (optional)
Помните, что токены применяются только для полей ввода номеров телефонов, адресов электронных почт и ников.
Самый длинный из возможных наборов токенов автозаполнения может выглядеть так:
Mobile phone for delivery
Да здравствуют стандарты! На этом всё, правильно? Боюсь, что нет. Я лелею надежду, что в конце концов все браузеры будут поддерживать расширенный стандарт автозаполнения, но пока это не так. Я протестировал мобильные и настольные версии браузеров, чтобы выяснить текущую ситуацию с поддержкой атрибутов. Вот результаты:| Chrome | 50 | OS X 10.11.4 | Нет | Да | Да |
| Opera | 35 | OS X 10.11.4 | Нет | Да | Да |
| Firefox | 46 | OS X 10.11.4 | Да | Да | Нет |
| Edge | 25 | Windows 10 | Нет | Да | Нет |
| Safari | 9.1 | OS X 10.11.4 | Частично | Частично | Частично |
| Safari | 9 | iOS 9.3.1 | Частично | Частично | Частично |
До сих пор только Chrome и Opera явным образом поддерживают новые возможности автозаполнения. В Safari, судя по всему, реализована частичная поддержка, но из-за отсутствия документации я не могу сказать, сделано ли это намеренно, или в случае с autocomplete , name и другими атрибутами просто осуществляется поиск с помощью регулярных выражений.Странное поведение Safari С момента появления в iOS 8 функции сканирования банковских карт веб-разработчики занимаются гаданием на кофейной гуще, стараясь определить, какую комбинацию признаков ищет Safari. Кто-то считает, что в атрибуте name нужно иметь определённые значения . Другие обнаружили, что используются значения в ID . Кажется, даже лейбл имеет значение :
Поле для имени владельца карты особенно хитрое. Мы долго игрались с разными ID и почти сдались. Нам не удалось вычислить ID, который заставил бы Card Scan заполнить реквизиты. После многочисленных разочарований мы наконец-то обнаружили, что всё дело в содержании соответствующего элемента label. Как только мы установили лейбл «Name on card», всё волшебным образом заработало.
Я провёл немало тестов и до сих пор не могу с уверенностью утверждать, что полностью разобрался в работе Safari. Тем не менее я всё же пришёл к нескольким основным заключениям:
Autocomplete поддерживается в полях ввода контактов и адреса
Safari распознаёт созданную мной форму, содержащую только атрибуты autocomplete . Как только я начинаю писать в первом поле, браузер предлагает заполнить форму моими контактными данными.
Всё работает, как и должно, но нужно сделать пару пояснений.
Во-первых, неясно, какая информация используется Safari для принятия решения об автозаполнении моих контактов из адресной книги Mac’a. Здесь указана моя должность, а название компании - нет.
Во-вторых, браузер не предлагает на выбор варианты для заполнения. В моих контактах указаны домашний и рабочий адреса, и Safari заполняет только домашний. Так что мне не повезёт, если я захочу заказать доставку в офис.
Автозаполнение платёжных форм работает совершенно ненадёжно
Поведение Safari в корне меняется, когда дело доходит до полей платёжных реквизитов. Атрибут autocomplete игнорируется. Вместо него браузер использует какую-то волшебную эвристику. А поскольку я не маг из Apple, то мне было трудно распознать, что же на самом деле происходит:
Здесь показано, как я отредактировал названия двух полей. В обоих случаях были указаны autocomplete , name и id , чтобы Safari было легче идентифицировать поля. Тем не менее он их не распознавал до тех пор, пока я не использовал в качестве лейблов Name on Card и Credit Card Number . Как уже упоминалось, для активации автозаполнения Safari нужно больше одного поля. Затем я попробовал изменить лейбл на CCNumber, автозаполнение продолжало работать. А вот с подписью CC Number всё сломалось.
Список значений, по которым Safari выполняет поиск, нигде не опубликован. К счастью, Жак Карон смог извлечь этот список строковых значений из эмулятора iOS :
- card number
- cardnumber
- cardnum
- ccnum
- ccnumber
- cc num
- creditcardnumber
- credit card number
- newcreditcardnumber
- new credit card
- creditcardno
- credit card no
- card#
- card #
- security code
- card verification
- name on credit card
- name on card
- nameoncard
- cardholder
- card holder
- name des karteninhabers
- card type
- cardtype
- cc type
- cctype
- payment type
- expiration date
- expirationdate
- expdate
- month
- date m
- date mo
- date y
- date yr
и
Name on Card
Credit Card Number
срабатывает автозаполнение в Safari и функция сканирования банковской карты в iOS. Но если поместить те же значения в атрибут autocomplete , то работать не будет.
По крайней мере, можно очень близко подойти к этой цели, выполнив четыре шага:
1. Добавьте атрибуты autocomplete
Это будущее автозаполнения. Если браузеры не распознают значения, то они их игнорируют. Это отличный пример прогрессивного улучшения.
2. Используйте для атрибутов name стандартные значения
При реализации автозаполнения в Firefox и Edge вам остаётся надеяться, что выбранные вами значения для атрибута name совпадают с теми, которые используют другие разработчики на своих сайтах. Для этого можно проанализировать популярные сайты и посмотреть, какие там значения. Или можно взять те же значения, что и в атрибуте autocomplete, в надежде, что чем больше веб-разработчиков познакомятся со стандартами, тем чаще будут использовать для своих полей те же наименования.
К сожалению, невозможно гарантировать, что пользователи Firefox и Edge ранее посещали форму, использующую те же самые значения name , что и в вашей форме.
3. Добавьте значения name и/или label в соответствии с используемым в Safari списком
С помощью извлечённого Жаком Кароном списка вы можете изменить значения атрибута name или элемента label , чтобы они соответствовали ожиданиям Safari.
4. Внесите автозаполнение в ваш план тестирования
Недавно я попросил у своих слушателей поднять руки, у кого в плане тестирования есть автозаполнение. Ни у кого не было. Я работаю в веб-разработке с 1996 года и до сих пор не встретил тех, у кого в плане тестирования было бы автозаполнение. Наверное, это какая-то слепая зона разработчиков и дизайнеров. Тем не менее крайне важно тестировать эту функциональность, чтобы удостовериться в её надёжной работе.
Финальная форма Вот пример формы, поддерживающей автозаполнение в Chrome, Safari, Opera, Firefox и Edge:Name Job Title Organization Telephone Number Email Shipping Address Street Address City (Address Level 2) State/Province (Address Level 1) Country Name Postal Code Do not use a real card Name on Card Credit Card Number
Чтобы удалить сохраненные в браузере поисковые запросы:
Запросы в поисковой строке ЯндексаЕсли вы авторизованы в Яндексе, то ваши запросы сохраняются по умолчанию – при повторном вводе они будут выделены фиолетовым. Кроме этого, сайты, на которые вы часто заходите, отображаются первыми в списке поисковых подсказок.
","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:
