Safari: конфликт между пользовательским автозаполнением и автозаполнением системных контактов

У нас есть веб-страница, которая содержит текст <input>, к которому мы прикрепляем пользовательский компонент автозаполнения (точнее, используя Typeahead AngularStrap).

Safari, очевидно, считает, что ввод содержит имя человека, и поэтому предоставляет меню автозаполнения со значениями, заполненными из адресной книги системы (небольшое меню вверху на скриншоте; также обратите внимание на соответствующий значок, добавленный Safari, обведенный зеленым).

скриншот-автозаполнение

Это приводит к следующим проблемам:

  1. Поле называется "Имя", но оно не должно содержать имена людей. Так что не имеет смысла давать предложения от человека.

  2. Встроенное меню Safari скрывает наше пользовательское меню предложений, показанное на снимке экрана ниже предложений Safari.

Я попробовал следующее, чтобы избавиться от предложений Safari:

  1. Измените атрибуты name и id с «name» на что-то вроде «title» или «GoToHellSafari». Не помогает.

  2. Добавьте autocomplete="off", добавьте autocomplete="false". Не помогает.

  3. Измените фактический текст в <label> на что-то кроме «Имя», например «Заголовок». Это работает, автозаполнение исчезло.

  4. Разорвите основанную на id связь между <input> и его <label>, удалив атрибуты id и name. Не помогает.

Хотя вариант (3) выглядит многообещающе, у меня есть следующая очевидная проблема: я хочу, чтобы эта метка читалась как «Имя». Какие-либо предложения?


html autocomplete safari autofill angular-strap
person qqilihq    schedule 17.10.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

У этого пользователя было хорошее решение, когда вы полностью скрываете кнопку автозаполнения: https://stackoverflow.com/a/39885072/20526

person Anton    schedule 27.10.2016
comment
Спасибо, это кажется хорошим началом. Однако он скрывает только значок, но не меню автозаполнения, которое скрывает мое пользовательское меню. - person qqilihq; 27.10.2016
comment
Я понимаю. Что ж, если мы можем скрыть иконку, то, вероятно, мы сможем найти и меню и скрыть его. Я слишком уверен, как найти его, хотя. - person Anton; 03.11.2016

arrow_upward
1
arrow_downward

Скрыть значок автозаполнения Safari в поле ввода:

::-webkit-contacts-auto-fill-button, ::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}
person Vadizar    schedule 28.02.2017
comment
Пожалуйста, смотрите существующий ответ. Это просто скрывает значок, но не меню. - person qqilihq; 28.02.2017

arrow_upward
0
arrow_downward

Я знаю, что это было несколько месяцев назад. У меня сегодня была такая же проблема. Но в моем случае это было простое текстовое поле, обязательное поле. И проблема была не со всеми обязательными полями, а только с некоторыми. Потратьте несколько часов на то, чтобы сходить с ума, просматривая все строки в моем коде...

Странно, что мой коллега с той же ОС, той же версией Safari и т. д. не имел такой проблемы.

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

Надеюсь это поможет

person Pat070    schedule 27.06.2017