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

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

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

Ответы

Ответ 1

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

<form autocomplete="off">

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

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

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

1), поскольку # id-стили еще важнее стилей .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);
        });
    });
}

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

<form autocomplete="off">

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

Ответ 5

После двух часов поиска кажется, что 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;
}

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

Иногда автозаполнение в браузере по-прежнему автозаполняется, когда у вас есть только код в элементе <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

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

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

Ответ 9

Это устраняет проблему как в 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);
}

Ответ 10

Если в поле ввода вы пытаетесь "не желтеть"...

Установите цвет фона с помощью css... пусть скажем #ccc (светло-серый).
Добавить value = "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='';" />

Ответ 11

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

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

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

Ответ 12

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

background-color: white !important;

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

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

Ответ 13

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

Ответ 14

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

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

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

Ответ 15

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

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

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

Ответ 16

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

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

Ответ 17

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

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

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

Ответ 18

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

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

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

После этого привяжите event focusin к полю пароля, например. в макете:

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

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

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

Вот так!

UPD: эта вещь не работает с отключенным JavaSciprt

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

Ответ 19

Я нашел эту страницу, это самый полный ответ, я думаю

http://webagility.com/posts/the-ultimate-list-of-hacks-for-chromes-forced-yellow-background-on-autocompleted-inputs

Ответ 20

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

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

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

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

Ответ 21

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

Об этом сообщается разработчикам Webkit.

Opera автоматически обрабатывает правую [форму].

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

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