Переопределить заполнение формы и выделение ввода в браузере с помощью HTML / CSS

Question 1

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

Кроме того, стили формы имеют желтый фон, который мне не удается переопределить, и я не хочу использовать для этого встроенный CSS. Что я могу сделать, чтобы они перестали быть желтыми~~и (возможно) автозаполнение~~? Заранее спасибо!

Question 2

для автозаполнения вы можете использовать:

<form autocomplete="off">

относительно проблемы окраски:

на вашем снимке экрана я вижу, что webkit генерирует следующий стиль:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) поскольку # id-styles даже более важны, чем стили .class, может работать следующее :

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) если это не сработает, вы можете попробовать установить стиль с помощью javascript программно

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) если это не сработает, ~~вы обречены :-) учтите~~ : это не скроет желтый цвет, но сделает текст снова читаемым.

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4) решение css / javascript:

css:

input:focus {
    background-position: 0 0;
}

и при загрузке должен быть запущен следующий javascript:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

например:

<body onload="loadPage();">

удачи :-)

5) Если ничего из вышеперечисленного не помогло, попробуйте удалить элементы ввода, клонировать их, а затем снова разместить клонированные элементы на странице (работает в Safari 6.0.3):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) Отсюда :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

Question 3

Обмани его с помощью "сильной" внутренней тени:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}

Question 4

Добавьте это правило CSS, и желтый цвет фона исчезнет. :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Question 5

<form autocomplete="off">

Практически все современные браузеры это уважают.

Question 6

После 2 часов поиска кажется, что Google Chrome все еще каким-то образом отменяет желтый цвет, но я нашел исправление. Он также будет работать для наведения, фокусировки и т. Д. Все, что вам нужно сделать, это добавить !importantк нему.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

это полностью удалит желтый цвет из полей ввода

Question 7

Вы также можете изменить атрибут name ваших элементов формы, чтобы он создавался так, чтобы браузер не отслеживал это. ОДНАКО firefox 2.x + и google chrome, похоже, не имеют особых проблем с этим, если URL-адрес запроса идентичен. Попробуйте просто добавить параметр запроса соли и имя поля соли для формы регистрации.

Однако я думаю, что autocomplete = "off" по-прежнему остается лучшим решением :)

Question 8

Вы можете отключить автозаполнение с HTML5 (через autocomplete="off"), но НЕ МОЖЕТЕ переопределить выделение в браузере. Вы можете попробовать возиться с::selection CSS (большинству браузеров для работы требуется префикс поставщика), но это, вероятно, вам тоже не поможет.

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

Question 9

Иногда автозаполнение в браузере по-прежнему выполняется автоматически, даже если в <form>элементе есть код .

Я тоже попробовал вставить его в <input>элемент, и он работал лучше.

<form autocomplete="off">  AND  <input autocomplete="off">

Однако поддержка этого атрибута прекращается, пожалуйста, прочтите https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

Еще одна работа, которую я обнаружил, - это удаление заполнителей внутри полей ввода, которые предполагают, что это адрес электронной почты, имя пользователя или поле телефона (например, «Ваша электронная почта», «Электронная почта» и т. Д.)

введите описание изображения здесь

Это делает так, что браузеры не знают, что это за поле, и поэтому не пытаются выполнить его автозаполнение.

Question 10

Если он находится в поле ввода, вы пытаетесь "убрать желтый" ...

Установите цвет фона с помощью css ... скажем, #ccc (светло-серый).
Добавьте значение = "sometext", которое временно заполняет поле "sometext"
(необязательно) Добавьте немного javascript, чтобы прояснить «sometext», когда вы собираетесь ввести настоящий текст.

Итак, это может выглядеть так:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />

Question 11

Это устраняет проблему как в Safari, так и в Chrome.

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Question 12

На снимке экрана, на который вы ссылаетесь, говорится, что WebKit использует селектор input:-webkit-autofillдля этих элементов. Вы пробовали поместить это в свой CSS?

input:-webkit-autofill {
    background-color: white !important;
}

Если это не сработает, то, вероятно, ничего не выйдет. Эти поля выделены, чтобы предупредить пользователя о том, что они были автоматически заполнены личной информацией (например, домашним адресом пользователя), и можно утверждать, что разрешение скрывать страницу создает угрозу безопасности.

Question 13

У formэлемента есть autocompleteатрибут, который можно установить off. Что касается CSS, !importantдиректива после свойства предотвращает его переопределение:

background-color: white !important;

Только IE6 этого не понимает.

Если я вас неправильно понял, есть еще одно outlineсвойство, которое может вам пригодиться.

Question 14

Я видел, как функция автозаполнения панели инструментов Google была отключена с помощью javascript. Это может работать с некоторыми другими инструментами автозаполнения; Не знаю, поможет ли это с браузерами, встроенными в автозаполнение.

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>

Question 15

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

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

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});

Question 16

Простое решение javascript для всех браузеров:

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

Клонировать ввод, сбросить атрибут и скрыть исходный ввод. Для iPad необходим тайм-аут

Question 17

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

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />

Question 18

Я прочитал так много тем и перепробовал так много фрагментов кода. Собрав все это, я нашел единственный способ очистить поля логина и пароля и сбросить их фон на белый цвет:

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

Не стесняйтесь комментировать, я открыт для всех улучшений, если вы их найдете.

Question 19

Отключение автозаполнения не поддерживается современными браузерами. Самый простой способ решить проблему с автозаполнением, который я нашел, - это небольшая дорожка с HTML и JS. Первое, что нужно сделать, это изменить тип ввода в HTML с «пароль» на «текст».

<input class="input input-xxl input-watery" type="text" name="password"/>

Автозаполнение запускается после загрузки окна. Все в порядке. Но когда тип вашего поля не «пароль», браузер не знал, какие поля он должен заполнить. Таким образом, в полях формы автозаполнения не будет.

После этого привяжите фокус события к полю пароля, например. в Backbone:

'focusin input[name=password]': 'onInputPasswordFocusIn',

В onInputPasswordFocusIn, просто изменить тип вашего поля пароля, с помощью простой проверки:

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

Вот и все!

UPD: эта штука не работает с отключенным JavaSciprt

UPD 2018. Тоже нашёл забавный трюк. Установите атрибут readonly для поля ввода и удалите его в событии focus. Первый запретить браузеру автозаполнение полей, второй позволит вводить данные.

Question 20

Пожалуйста, попробуйте с autocomplete = "none" в вашем теге ввода

Это работает для меня

Question 21

Мне также пришлось изменить цвет текста на более темный (см. Цвета темной темы StackOverflow).

В итоге получился гибрид @ Tamás Pap, @MCBL и @don:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}

Question 22

Кажется, это работает для меня:

input {
  -webkit-background-clip: text !important;
}

Развернуть фрагмент

Question 23

Почему бы просто не поместить это в свой css:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

Это должно решить вашу проблему. Хотя это вызывает проблему с удобством использования, потому что теперь пользователь не может видеть, что форма была заполнена автоматически, как он / она привык.

[править] После публикации я увидел, что аналогичный ответ уже был дан, и вы прокомментировали его, что он не работает. Я не совсем понимаю, почему, потому что он действительно работал, когда я его тестировал.

Question 24

НАСТОЯЩАЯ проблема здесь в том, что в Webkit (Safari, Chrome, ...) есть ошибка. Если на странице более одной [формы], каждая из которых имеет [input type = "text" name = "foo" ...] (то есть с одинаковым значением атрибута 'name'), тогда, когда пользователь возвращается для страницы автозаполнение будет выполнено в поле ввода ПЕРВОЙ [формы] на странице, а не в [форме], которая была отправлена. Во второй раз будет автоматически заполнена форма NEXT [form] и так далее. Будет затронута только [форма] с текстовым полем ввода с ОДНИМ именем.

Об этом следует сообщить разработчикам Webkit.

Opera автоматически заполняет правую [форму].

Firefox и IE не заполняются автоматически.

Итак, я повторяю: это ошибка в Webkit.

Answer 1

141

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

Кроме того, стили формы имеют желтый фон, который мне не удается переопределить, и я не хочу использовать для этого встроенный CSS. Что я могу сделать, чтобы они перестали быть желтыми~~и (возможно) автозаполнение~~? Заранее спасибо!

html css input autofill Casraf
источник

4

Вы действительно задаете здесь два вопроса: как отключить автозаполнение форм? -И- Как переопределить желтый фон при включенном автозаполнении формы? Это было непонятно, пока я не прочитал все комментарии в ответах ниже. Возможно, вы захотите отредактировать свой вопрос (тем более, что вы зашли так далеко, что предложили награду).

benzado 07

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

casraf

1

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

Byran Zaugg

В том-то и дело, я отключил автозаполнение только в форме РЕГИСТРАЦИИ, которая, по сути, не должна иметь обычного автозаполнения, информация о завершении создается только после того, как вы зарегистрировались. Что касается формы входа, я хочу оставить автозаполнение включенным, но просто отключите тупой цвет, который он помещает в поля ввода, потому что текст внутри становится нечитаемым - фон желтый, а цвет текста белый (исходный фон темно-серый) .

casraf

1

возможный дубликат автозаполнения формы Google Chrome и его желтый фон

zzzzBov

Answer 2

4

Вы действительно задаете здесь два вопроса: как отключить автозаполнение форм? -И- Как переопределить желтый фон при включенном автозаполнении формы? Это было непонятно, пока я не прочитал все комментарии в ответах ниже. Возможно, вы захотите отредактировать свой вопрос (тем более, что вы зашли так далеко, что предложили награду).

benzado 07

Answer 3

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

casraf

Answer 4

1

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

Byran Zaugg

Answer 5

В том-то и дело, я отключил автозаполнение только в форме РЕГИСТРАЦИИ, которая, по сути, не должна иметь обычного автозаполнения, информация о завершении создается только после того, как вы зарегистрировались. Что касается формы входа, я хочу оставить автозаполнение включенным, но просто отключите тупой цвет, который он помещает в поля ввода, потому что текст внутри становится нечитаемым - фон желтый, а цвет текста белый (исходный фон темно-серый) .

casraf

Answer 6

1

возможный дубликат автозаполнения формы Google Chrome и его желтый фон

zzzzBov

Answer 7

для автозаполнения вы можете использовать:

<form autocomplete="off">

относительно проблемы окраски:

на вашем снимке экрана я вижу, что webkit генерирует следующий стиль:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) поскольку # id-styles даже более важны, чем стили .class, может работать следующее :

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) если это не сработает, вы можете попробовать установить стиль с помощью javascript программно

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) если это не сработает, ~~вы обречены :-) учтите~~ : это не скроет желтый цвет, но сделает текст снова читаемым.

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4) решение css / javascript:

css:

input:focus {
    background-position: 0 0;
}

и при загрузке должен быть запущен следующий javascript:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

например:

<body onload="loadPage();">

удачи :-)

5) Если ничего из вышеперечисленного не помогло, попробуйте удалить элементы ввода, клонировать их, а затем снова разместить клонированные элементы на странице (работает в Safari 6.0.3):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) Отсюда :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

Answer 8

(1) не работает. Я попробую (2) когда вернусь домой; надеюсь, JS сможет это преодолеть; спасибо :)

casraf

Answer 9

1

(4) определенно удаляет желтый цвет: рамка фокуса.

ruruskyi

Answer 10

Если последний бит не работает для вас, и вы знаете, как работает javascript (получил правильный идентификатор и т. Д.), У вас может быть проблема, которая у меня была, я использую jquery mobile по некоторым причинам, и это происходит позже и заменяет входы это выглядит. Итак, я установил интервал, который клонирует его каждые 50 мс (он работал через 400 мс с использованием setTimeout, но я не хочу рисковать медленными соединениями). А через секунду интервал убирается:code

Mathijs Segers

Answer 11

var keepTheInputCloned = setInterval(function(){                          var e = document.getElementById('id_email');             var ep = e.parentNode;             ep.removeChild(e);             var e2 = e.cloneNode();             ep.appendChild(e2);              var p = document.getElementById('id_password');             var pp = p.parentNode;             pp.removeChild(p);             var p2 = p.cloneNode();             pp.appendChild(p2);         },50);         setTimeout(function(){clearInterval(keepTheInputCloned)},1000);

Mathijs Segers

Answer 12

У меня аналогичная проблема с Safari на Mavericks. Но когда я использую метод 5, они выключают его на одну секунду (или три секунды, когда я устанавливаю тайм-аут на 3000), а затем браузер выигрывает, и у меня включается автозаполнение. В моем случае использования я прошу пользователя указать его имя пользователя / пароль для другого сайта, чтобы я мог получать информацию с другого сайта, поэтому я определенно не хочу, чтобы он автоматически заполнял имя пользователя и пароль, которые они используют для моего сайта. Есть какие-нибудь мысли по этому поводу (кроме гибели оригинального №3)?

Jack RG

Answer 13

224

Обмани его с помощью "сильной" внутренней тени:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}

Тамаш Пап
источник

11

Это действительно умно. :)

Джордан Грей

3

+1000 (если бы я мог) Да, я не могу придумать другого способа сделать это. Это действительно навязчиво для webkit ...

o_O

1

круто, это должен быть ответ номер один, простой и эффективный

Pixelomo

3

Это здорово, потому что это работает, и это действительно творческий подход. Но это напоминает мне старые хаки IE6 и тому подобное. Какое-то дерьмо со стороны Google, когда он дает нам параметр: -webkit-autofill и не позволяет дизайнерам отменять значение по умолчанию, верно?

squarecandy

1

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

Лунстер,

Answer 14

11

Это действительно умно. :)

Джордан Грей

Answer 15

3

+1000 (если бы я мог) Да, я не могу придумать другого способа сделать это. Это действительно навязчиво для webkit ...

o_O

Answer 16

1

круто, это должен быть ответ номер один, простой и эффективный

Pixelomo

Answer 17

3

Это здорово, потому что это работает, и это действительно творческий подход. Но это напоминает мне старые хаки IE6 и тому подобное. Какое-то дерьмо со стороны Google, когда он дает нам параметр: -webkit-autofill и не позволяет дизайнерам отменять значение по умолчанию, верно?

squarecandy

Answer 18

1

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

Лунстер,

Answer 19

26

Добавьте это правило CSS, и желтый цвет фона исчезнет. :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

MCBL
источник

1

У меня это сработало - спасибо! (хотя мне нужно было изменить белый цвет на тот, который я действительно хотел)

jennEDVT 05

2

Ясно лучший ответ.

Брэндон Харрис,

Answer 20

1

У меня это сработало - спасибо! (хотя мне нужно было изменить белый цвет на тот, который я действительно хотел)

jennEDVT 05

Answer 21

2

Ясно лучший ответ.

Брэндон Харрис,

Answer 22

16

<form autocomplete="off">

Практически все современные браузеры это уважают.

Джейсон Кестер
источник

7

Замечательно, но это решает только менее важную проблему; как я могу сохранить автозаполнение, но потерять стиль ( prntscr.com/4hkh ), который webkit пихает ему в глотку? o: спасибо, хотя

casraf

1

Фактически, он должен делать и то, и другое. Поле становится желтым только для того, чтобы вы знали, что chrome / safari / ff автоматически заполнил его вашим паролем. Если вы скажете, чтобы он не наполнялся, у него не будет возможности его раскрасить.

Джейсон Кестер

11

да, но посмотрите на то, что я сказал: «как я могу сохранить автозаполнение, но потерять стиль, который использует webkit»

casraf

Единственная проблема autocompleteзаключается в том, что он недействителен в HTML до версии 5.

Пол Д. Уэйт

Answer 23

7

Замечательно, но это решает только менее важную проблему; как я могу сохранить автозаполнение, но потерять стиль ( prntscr.com/4hkh ), который webkit пихает ему в глотку? o: спасибо, хотя

casraf

Answer 24

1

Фактически, он должен делать и то, и другое. Поле становится желтым только для того, чтобы вы знали, что chrome / safari / ff автоматически заполнил его вашим паролем. Если вы скажете, чтобы он не наполнялся, у него не будет возможности его раскрасить.

Джейсон Кестер

Answer 25

11

да, но посмотрите на то, что я сказал: «как я могу сохранить автозаполнение, но потерять стиль, который использует webkit»

casraf

Answer 26

Единственная проблема autocompleteзаключается в том, что он недействителен в HTML до версии 5.

Пол Д. Уэйт

Answer 27

После 2 часов поиска кажется, что Google Chrome все еще каким-то образом отменяет желтый цвет, но я нашел исправление. Он также будет работать для наведения, фокусировки и т. Д. Все, что вам нужно сделать, это добавить !importantк нему.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

это полностью удалит желтый цвет из полей ввода

Answer 28

У меня это работает без 1000 пикселей, везде 0, -webkit-box-shadow: 0 0 0 0 белая вставка! Important;

Луис Лопес

Answer 29

Вы также можете изменить атрибут name ваших элементов формы, чтобы он создавался так, чтобы браузер не отслеживал это. ОДНАКО firefox 2.x + и google chrome, похоже, не имеют особых проблем с этим, если URL-адрес запроса идентичен. Попробуйте просто добавить параметр запроса соли и имя поля соли для формы регистрации.

Однако я думаю, что autocomplete = "off" по-прежнему остается лучшим решением :)

Answer 30

Вы можете отключить автозаполнение с HTML5 (через autocomplete="off"), но НЕ МОЖЕТЕ переопределить выделение в браузере. Вы можете попробовать возиться с::selection CSS (большинству браузеров для работы требуется префикс поставщика), но это, вероятно, вам тоже не поможет.

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

Answer 31

Иногда автозаполнение в браузере по-прежнему выполняется автоматически, даже если в <form>элементе есть код .

Я тоже попробовал вставить его в <input>элемент, и он работал лучше.

<form autocomplete="off">  AND  <input autocomplete="off">

Однако поддержка этого атрибута прекращается, пожалуйста, прочтите https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

Еще одна работа, которую я обнаружил, - это удаление заполнителей внутри полей ввода, которые предполагают, что это адрес электронной почты, имя пользователя или поле телефона (например, «Ваша электронная почта», «Электронная почта» и т. Д.)

введите описание изображения здесь

Это делает так, что браузеры не знают, что это за поле, и поэтому не пытаются выполнить его автозаполнение.

Answer 32

Что мне нравится в этом, так это то, что большинство людей НЕ БУДЕТ ценить заполнение всей формы при перезагрузке страницы (например, длинную текстовую область), но позволяет разработчику предотвратить заполнение определенных элементов (например, номера банковской карты). К сожалению, поддержка этого атрибута прекращается

Люк Мадханга

Answer 33

Если он находится в поле ввода, вы пытаетесь "убрать желтый" ...

Установите цвет фона с помощью css ... скажем, #ccc (светло-серый).
Добавьте значение = "sometext", которое временно заполняет поле "sometext"
(необязательно) Добавьте немного javascript, чтобы прояснить «sometext», когда вы собираетесь ввести настоящий текст.

Итак, это может выглядеть так:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />

Answer 34

1

Это устраняет проблему как в Safari, так и в Chrome.

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Арджан
источник

1

Я верю, что так и будет, но не будет ли жестко делать это 50 раз в секунду? Я знаю, что это сработает и не будет слишком медленным. Но кажется многовато.

Mathijs Segers

Answer 35

1

Я верю, что так и будет, но не будет ли жестко делать это 50 раз в секунду? Я знаю, что это сработает и не будет слишком медленным. Но кажется многовато.

Mathijs Segers

Answer 36

На снимке экрана, на который вы ссылаетесь, говорится, что WebKit использует селектор input:-webkit-autofillдля этих элементов. Вы пробовали поместить это в свой CSS?

input:-webkit-autofill {
    background-color: white !important;
}

Если это не сработает, то, вероятно, ничего не выйдет. Эти поля выделены, чтобы предупредить пользователя о том, что они были автоматически заполнены личной информацией (например, домашним адресом пользователя), и можно утверждать, что разрешение скрывать страницу создает угрозу безопасности.

Answer 37

0

У formэлемента есть autocompleteатрибут, который можно установить off. Что касается CSS, !importantдиректива после свойства предотвращает его переопределение:

background-color: white !important;

Только IE6 этого не понимает.

Если я вас неправильно понял, есть еще одно outlineсвойство, которое может вам пригодиться.

знеак
источник

2

Chrome, кажется, игнорирует!

Important

@Torandi Это может быть из-за таблиц стилей пользовательского агента. Настройки из таблиц стилей пользовательского агента должны применяться последними, если они не имеют !importantдирективы, и в этом случае они имеют приоритет над всем остальным. Вам следует проверить таблицу стилей пользовательского агента (хотя я не знаю, где ее найти).

zneak

Answer 38

2

Chrome, кажется, игнорирует!

Important

Answer 39

@Torandi Это может быть из-за таблиц стилей пользовательского агента. Настройки из таблиц стилей пользовательского агента должны применяться последними, если они не имеют !importantдирективы, и в этом случае они имеют приоритет над всем остальным. Вам следует проверить таблицу стилей пользовательского агента (хотя я не знаю, где ее найти).

zneak

Answer 40

Я видел, как функция автозаполнения панели инструментов Google была отключена с помощью javascript. Это может работать с некоторыми другими инструментами автозаполнения; Не знаю, поможет ли это с браузерами, встроенными в автозаполнение.

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>

Answer 41

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

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

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});

Answer 42

Простое решение javascript для всех браузеров:

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

Клонировать ввод, сбросить атрибут и скрыть исходный ввод. Для iPad необходим тайм-аут

Answer 43

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

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />

Answer 44

Я прочитал так много тем и перепробовал так много фрагментов кода. Собрав все это, я нашел единственный способ очистить поля логина и пароля и сбросить их фон на белый цвет:

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

Не стесняйтесь комментировать, я открыт для всех улучшений, если вы их найдете.

Answer 45

0

Отключение автозаполнения не поддерживается современными браузерами. Самый простой способ решить проблему с автозаполнением, который я нашел, - это небольшая дорожка с HTML и JS. Первое, что нужно сделать, это изменить тип ввода в HTML с «пароль» на «текст».

<input class="input input-xxl input-watery" type="text" name="password"/>

Автозаполнение запускается после загрузки окна. Все в порядке. Но когда тип вашего поля не «пароль», браузер не знал, какие поля он должен заполнить. Таким образом, в полях формы автозаполнения не будет.

После этого привяжите фокус события к полю пароля, например. в Backbone:

'focusin input[name=password]': 'onInputPasswordFocusIn',

В onInputPasswordFocusIn, просто изменить тип вашего поля пароля, с помощью простой проверки:

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

Вот и все!

UPD: эта штука не работает с отключенным JavaSciprt

UPD 2018. Тоже нашёл забавный трюк. Установите атрибут readonly для поля ввода и удалите его в событии focus. Первый запретить браузеру автозаполнение полей, второй позволит вводить данные.

Владимир3131
источник

Автозаполнение является частью стандарта, хотя его использование и реализация могут отличаться. Кроме того, изменение типов ввода в IE резко не работает, поэтому jQuery блокирует его, но, как правило, это не лучшая идея, если вы планируете поддерживать IE developer.mozilla.org/en-US/docs/Web/Security/…

casraf

@casraf Извините, это часть стандарта, но он работает не во всех современных браузерах, как должен, поэтому он не будет делать то, для чего был изобретен. В EDGE работает нормально, про предыдущие версии ничего сказать не могу (

volodymyr3131

Правда, не везде это реализовано. Проблема все еще существует - в зависимости от того, насколько давно вы хотите поддерживать IE - до версии 11 я не верю, что вы можете изменить тип ввода. Если вас не беспокоят старые версии, то вы также можете использовать autocomplete=off, поскольку он работает в FF, Chrome какое-то время и IE с предыдущей версии или около того

casraf

Я пробовал использовать autocomplete = off как для ввода, так и для формы, а Chrome по-прежнему заполняет данные форм регистрации и входа (. Это просто какая-то странная магия, потому что, судя по комментариям, в некоторых случаях это работает, а в некоторые это не =)

volodymyr3131

Я знаю, что эти стандарты не соблюдаются постоянно. Обидно, делает нашу жизнь тяжелее :(

casraf

Answer 46

Автозаполнение является частью стандарта, хотя его использование и реализация могут отличаться. Кроме того, изменение типов ввода в IE резко не работает, поэтому jQuery блокирует его, но, как правило, это не лучшая идея, если вы планируете поддерживать IE developer.mozilla.org/en-US/docs/Web/Security/…

casraf

Answer 47

@casraf Извините, это часть стандарта, но он работает не во всех современных браузерах, как должен, поэтому он не будет делать то, для чего был изобретен. В EDGE работает нормально, про предыдущие версии ничего сказать не могу (

volodymyr3131

Answer 48

Правда, не везде это реализовано. Проблема все еще существует - в зависимости от того, насколько давно вы хотите поддерживать IE - до версии 11 я не верю, что вы можете изменить тип ввода. Если вас не беспокоят старые версии, то вы также можете использовать autocomplete=off, поскольку он работает в FF, Chrome какое-то время и IE с предыдущей версии или около того

casraf

Answer 49

Я пробовал использовать autocomplete = off как для ввода, так и для формы, а Chrome по-прежнему заполняет данные форм регистрации и входа (. Это просто какая-то странная магия, потому что, судя по комментариям, в некоторых случаях это работает, а в некоторые это не =)

volodymyr3131

Answer 50

Я знаю, что эти стандарты не соблюдаются постоянно. Обидно, делает нашу жизнь тяжелее :(

casraf

Answer 51

0

Пожалуйста, попробуйте с autocomplete = "none" в вашем теге ввода

Это работает для меня

Вайодя Тамари
источник

Answer 52

Мне также пришлось изменить цвет текста на более темный (см. Цвета темной темы StackOverflow).

В итоге получился гибрид @ Tamás Pap, @MCBL и @don:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}

Answer 53

Кажется, это работает для меня:

input {
  -webkit-background-clip: text !important;
}

Развернуть фрагмент

Answer 54

Почему бы просто не поместить это в свой css:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

Это должно решить вашу проблему. Хотя это вызывает проблему с удобством использования, потому что теперь пользователь не может видеть, что форма была заполнена автоматически, как он / она привык.

[править] После публикации я увидел, что аналогичный ответ уже был дан, и вы прокомментировали его, что он не работает. Я не совсем понимаю, почему, потому что он действительно работал, когда я его тестировал.

Answer 55

не работает ни в хроме, ни в сафари. стиль есть input:-webkit-autofillи input --webkit-autocompleteпросто не существует

ruruskyi

Answer 56

@EliseuMonar: Я почти уверен, что не лгал, но не могу вспомнить подробности того, как и где я это тестировал. Сам код, вероятно, был набран из памяти, а не скопирован / вставлен, поэтому автозаполнение или автозаполнение? Понятия не имею.

Крис,

Answer 57

НАСТОЯЩАЯ проблема здесь в том, что в Webkit (Safari, Chrome, ...) есть ошибка. Если на странице более одной [формы], каждая из которых имеет [input type = "text" name = "foo" ...] (то есть с одинаковым значением атрибута 'name'), тогда, когда пользователь возвращается для страницы автозаполнение будет выполнено в поле ввода ПЕРВОЙ [формы] на странице, а не в [форме], которая была отправлена. Во второй раз будет автоматически заполнена форма NEXT [form] и так далее. Будет затронута только [форма] с текстовым полем ввода с ОДНИМ именем.

Об этом следует сообщить разработчикам Webkit.

Opera автоматически заполняет правую [форму].

Firefox и IE не заполняются автоматически.

Итак, я повторяю: это ошибка в Webkit.

Переопределить заполнение формы и выделение ввода в браузере с помощью HTML / CSS

Ответы: