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

Question

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

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

Я видел отключенную функцию автозаполнения панели инструментов 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 4

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

background-color: white !important;

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

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

Answer 5

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

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

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

Answer 6

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

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

Answer 7

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

$(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 8

Настоящая проблема здесь в том, что в Webkit (Safari, Chrome, ...) есть ошибка.Когда на странице имеется более одной [формы], каждая из которых имеет [input type = "text" name = "foo" ...] (то есть с тем же значением для атрибута 'name'), то когда пользователь возвращаетна странице автозаполнение будет выполнено в поле ввода FIRST [формы] на странице, а не в [форме], которая была отправлена.Во второй раз СЛЕДУЮЩАЯ [форма] будет автоматически заполнена и так далее.Будет затронуто только [форма] с полем ввода текста с тем же именем.

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

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

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

Итак, еще раз говорю: это ошибка в Webkit.

Answer 9

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

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

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

После этого привязать событие focusin к полю пароля, например. в магистрали:

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

В onInputPasswordFocusIn просто измените тип поля на пароль, просто проверив:

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

Вот и все!

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

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

Answer 10

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

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

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);
  }
});