Замініть заповнення форми в браузері та виділення введення за допомогою HTML / CSS

139

У мене є 2 основні форми - увійдіть і підпишіться, обидві на одній сторінці. Тепер у мене немає проблем із автоматичним заповненням форми,~~але форму реєстрації автоматично заповнює, і мені це не подобається.~~

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

— карась
джерело

4

Ви справді задаєте тут два питання: Як відключити автозаповнення форми? -AND- Як замінити жовтий фон, коли автозаповнення форми включено? Це було не ясно, поки я не прочитав усі коментарі у відповідях нижче. Ви можете подумати про редагування свого питання (тим більше, що ви зайшли далеко, щоб запропонувати щедроту).

— бензадо

Ти маєш рацію, відредагований. Або ледачий варіант його все одно.

— касраф

1

Як користувач форми, я б ненавиджу, щоб мої зручності були покалічені через ваші візуальні вподобання, примушуючи автоматичне завершення та виділення. Нехай користувач вимикає це, а не ви. Залиште свій досвід перегляду в спокої.

— Биран Заугг

Це те, що я відключив автозаповнення у формі РЕЄСТРАЦІЇ, яка, в основному, не повинна мати регулярного автозаповнення, інформація про завершення створюється лише після реєстрації. Що стосується форми входу, я хочу продовжувати автоматичне заповнення, але просто вимкніть тупий колір, який він наносить на поля введення, оскільки текст всередині стає нечитабельним - фон жовтий, а колір тексту - білий (оригінальний фон темно-сірий) .

— касраф

1

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

— zzzzBov

163

для автоматичного завершення можна використовувати:

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

— Філ Риков
джерело

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

— casraf

1

(4) однозначно видаляє жовтий: межа фокусу.

— ruruskyi

Якщо останній біт не працює для вас, і ви знаєте, як працює JavaScript (отримав право id тощо). У вас може виникнути проблема, яку я мав, я використовую jquery mobile з якихось причин, і це вставляється пізніше і замінює вхідні дані здається. Тож, що я зробив, це встановити інтервал, який клонує його кожні 50 мс (він працював через 400 мс за допомогою setTimeout, але я не хочу ризикувати повільними з'єднаннями). А через секунду інтервал знімається:code

— Mathijs Segers

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

У мене є аналогічна проблема із Safari на Mavericks. Але коли я використовую метод 5, вони запускають його на одну секунду (або три секунди, коли я встановив час очікування на 3000), і тоді браузер виграє, і я ввімкнув автозаповнення. У моєму випадку використання я прошу у користувача їх ім’я користувача / пароля для іншого сайту, щоб я міг перетягувати інформацію з іншого сайту, тому я точно не хочу, щоб він заповнив ім'я користувача та пароль, які вони використовують для мого сайту. Будь-які думки з цього приводу (крім приреченості оригіналу №3)?

— Джек РГ

218

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

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

— Тамаш Пап
джерело

10

Це справді розумно. :)

— Джордан Грей

3

+1000 (якщо б міг) Так, я не можу зрозуміти іншого способу зробити це. Це дійсно нав'язливо для веб-файлів ...

— o_O

1

приголомшливою це повинна бути відповідь номер один, проста та ефективна

— Pixelomo

3

Це приголомшливо тим, що воно працює і є справді творчим. Але це нагадує мені старі хаки IE6 тощо. Якийсь хитрий Google, щоб дати нам параметр -webkit-autofill і не дозволяти дизайнерам заміняти стандартні настройки, правда?

— квадратна

1

Забезпечення вибору кольору, який неможливо налаштувати, не сприяє зручності використання та доступності. Ці побоювання все ще повністю в руках розробника, за винятком цього розчарувального злому в Chrome. Ніхто не може помилитися з наміром розробників Chrome, лише з результатами.

— Люнстер

25

Додайте це правило CSS, і жовтий колір фону не зникне. :)

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

— MCBL
джерело

1

Це працювало для мене - дякую! (хоча мені потрібно було змінити білий на колір, який я насправді хотів)

— jennEDVT

2

Очевидно найкраща відповідь.

— Брендон Харріс

16

<form autocomplete="off">

Насправді це поважають усі сучасні браузери.

— Джейсон Кестер
джерело

7

Дивовижно, але це вирішує лише менш важливе питання; як я можу втримати автоматичне завершення, але втратити стиль ( prntscr.com/4hkh ) веб- кіт підштовхує до горла? o: хоча дякую

— casraf

1

Власне, це має робити і те, і інше. Поле стає лише жовтим, щоб повідомити, що chrome / safari / ff автоматично заповнив його вашим паролем. Якщо ви скажете не заповнювати, це не отримає шансу розфарбувати його.

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

11

так, але погляньте на те, що я сказав: "як я можу тримати автоматичне завершення, але втратити стилі веб-кайтів"

— casraf

Єдиною проблемою autocompleteє те, що він недійсний у HTML до версії 5.

— Пол Д. Уайт

15

Після двох годин пошуку здається, що 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;
}

це повністю видалить жовтий колір з полів введення

— дон
джерело

Це працює для мене без 1000px, просто 0 скрізь, -webkit-box-shadow: 0 0 0 0 біла вставка! Важливо;

— Луїс Лопес

3

Ви також можете змінити атрибут імені елементів форми, щоб він був генерований, щоб браузер не відслідковував його. ЯК-то Firefox 2.x + та Google Chrome chrome не мають великих проблем із цим, якщо URL-адреса запиту однакова. Спробуйте в основному додати параметр запиту солі та назву сольового поля для форми реєстрації.

Однак я думаю, що автозаповнення = "вимкнено" все ще є найкращим рішенням :)

— Дмитро Ліхтен
джерело

3

Ви можете відключити автоматичне заповнення з HTML5 (через autocomplete="off"), але ви не можете перекрити виділення браузера. Ви можете спробувати заплутатися ::selectionв CSS (для роботи більшості браузерів потрібен префікс постачальника), але це, ймовірно, вам теж не допоможе.

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

— Алан Слива
джерело

3

Іноді автозаповнення в браузері все ще автоматично завершується, коли у вас просто є код у <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

Інша робота, яку я знайшов, - це видалення заповнювачів усередині полів введення, які дозволяють припустити, що це поле електронної пошти, ім’я користувача або поле телефону (тобто "Ваш електронний лист", "Електронна пошта" тощо "

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

Це робить так, що браузери не знають, що це за поле, тому не намагаються його заповнити.

— andstud.io
джерело

Що мені подобається в цьому, більшість людей НЕ БУДЕ вдячні за те, що вся форма не заповнюється при перезавантаженні сторінки (наприклад, довга область тексту), але дозволяє розробнику запобігати заповненню певних елементів (наприклад, номер банківської картки). Прикро, однак, підтримка цього атрибуту припиняється

— Люк Мадханга

1

Якщо це поле введення, ви намагаєтеся "не жовтіти" ...

Встановіть колір фону за допомогою css ... скажімо, #ccc (світло-сірий).
Додати значення = "sometext", яке тимчасово заповнює поле "sometext"
(необов’язково) Додайте трохи javascript, щоб зробити "деякий текст" зрозумілим, коли ви збираєтеся вставити реальний текст.

Отже, це може виглядати приблизно так:

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

— білий кінь
джерело

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

0

На скріншоті, з яким ви пов’язані, йдеться про те, що WebKit використовує селектор input:-webkit-autofillдля цих елементів. Ви намагалися помістити це у свій CSS?

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

Якщо це не працює, то, ймовірно, нічого не буде. Ці поля виділяються, щоб сповістити користувача про те, що він заповнений приватною інформацією (наприклад, домашньою адресою користувача), і можна стверджувати, що дозволити приховувати сторінку, що дозволяє загрожувати безпеці.

— бензадо
джерело

0

formЕлемент має autocompleteатрибут , який можна встановити в off. Що стосується CSS, то !importantдиректива після того, як властивість не дозволяє їй перекрити:

background-color: white !important;

Тільки IE6 цього не розуміє.

Якщо я неправильно зрозумів вас, є також outlineмайно, яке ви можете знайти корисним.

— знук
джерело

2

Здається, Chrome ігнорує найважливіше, коли він автоматично

— заповнює

@Torandi Це може бути через таблиці стилів користувацьких агентів. Налаштування з таблиць стилів користувацьких агентів повинні застосовуватися останніми, якщо вона не має !importantдирективи, і в цьому випадку вона має перевагу над усім іншим. Слід переглянути таблицю стилів вашого агента користувача (хоча я не знаю, де її знайти).

— zneak

0

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

— Адам
джерело

0

Перепробувавши багато речей, я знайшов робочі рішення, які занурили заповнені поля та замінили їх дублюючими. Щоб не втратити приєднаних подій, я придумав інше (трохи тривале) рішення.

На кожній події "введення" вона швидко приєднує події "зміни" до всіх залучених входів. Він перевіряє, чи були вони заповнені авто. Якщо так, то відправте нову текстову подію, яка спокусить браузер думати, що значення було змінено користувачем, тим самим дозволяючи видалити жовтий фон.

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

— Ернестс Карлсонс
джерело

0

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

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

Клоніруйте введення, скиньте атрибут та прихойте вихідний вхід Час очікування потрібен для iPad

— Кліщ
джерело

0

Оскільки браузер шукає поля типу пароля, іншим способом вирішення є включення прихованого поля на початку форми:

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

— Kt Mack
джерело

0

Я прочитав стільки тем і спробував стільки фрагментів коду. Після збору всіх цих матеріалів, єдиним способом я виявив, що потрібно чисто випорожнити поля для входу та пароля та скинути їх на білий колір:

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

Не соромтесь коментувати, я відкритий для всіх вдосконалень, якщо ви знайдете їх.

— TwystO
джерело

0

Автозаповнення не підтримується сучасними браузерами. Найпростіший спосіб вирішити автозаповнення, який я знайшов, - це невелика доріжка з HTML та JS. Перше, що потрібно зробити - це змінити тип введення в HTML з "пароль" на "текст".

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

Автозаповнення починається після завантаження вікна. Це добре. Але коли тип поля не "пароль", браузер не знав, які поля він повинен заповнити. Отже, у полях форм не буде автозаповнення.

Після цього прив’яжіть фокус події до поля пароля, напр. в хребті:

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

В onInputPasswordFocusIn, просто змінити тип вашого поля пароля, з допомогою простої перевірки:

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

Це все!

UPD: ця справа не працює з вимкненим JavaSciprt

UPD 2018 року. Також знайшов якийсь кумедний трюк. Встановіть атрибут readonly для поля введення та видаліть його на події фокусування. Перший запобігає перегляду браузера від заповнення полів, другий дозволить вводити дані.

— Володимир3131
джерело

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

— casraf

@casraf Вибачте, це частина стандарту, але вона не працює у всіх сучасних браузерах як слід, тому не буде робити те, що було придумано. У EDGE він працює чудово, про попередні версії нічого не можна сказати (

— volodymyr3131

Правда, вона не реалізована скрізь. Проблема все ще залишається - залежно від того, наскільки далеко ви хочете підтримати IE - до v 11, я не вірю, що ви можете змінити тип введення. Якщо ви не переживаєте за старі версії, то ви можете також використовувати autocomplete=off, оскільки вона працює на FF, Chrome на деякий час і IE, як і в попередній версії або так

— casraf

Я намагався використовувати autocomplete = off, як для входів, так і для форми, а Chrome все ще заповнює дані форм реєстрації та входу (. Це просто якась дивна магія, тому що, виходячи з коментарів, у деяких випадках це працює, і в дехто це не =)

— volodymyr3131

Я знаю, цих стандартів насправді не дотримуються послідовно. Це соромно, ускладнює наше життя :(

— casraf

0

Спробуйте скористатись autocomplete = "none" у вхідному тезі

Це працює для мене

— Вайодя Тамарі
джерело

0

Мені довелося також змінити колір тексту на щось більш темне (див. Темні кольори теми 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;
}

— Андрій
джерело

-3

Чому б просто не помістити це у свій css:

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

Це має вирішити ваше питання. Хоча це і викликає проблему зручності використання, тому що тепер користувач не може бачити, що форма була заповнена автоматично, як раніше.

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

— Кріс
джерело

не працює і в хромі, і в сафарі. стилю є input:-webkit-autofillі input --webkit-autocompleteпросто не існує

— ruruskyi

@EliseuMonar: Я майже впевнений, що не брешу, але не можу пригадати подробиці того, як і де я це перевірив. Сам код, ймовірно, був набраний із пам'яті, а не копіювання / вставлення, тож автозаповнення проти автозаповнення? Я не знаю.

— Кріс

-3

Справжня проблема тут полягає в тому, що Webkit (Safari, Chrome, ...) має помилку. Коли на сторінці є більше [форми], кожна з яких має [input type = "text" name = "foo" ...] (тобто з однаковим значенням для атрибута 'name'), тоді, коли користувач повертається на сторінку автоматичне заповнення буде виконано у полі введення ПЕРШОЇ [форми] на сторінці, а не у [формі], що була надіслана. Другий раз, NEXT [форма] буде заповнена автоматично тощо. Буде задіяно лише [форма] з текстовим полем із введенням SAME.

Про це слід повідомити розробникам Webkit.

Опера автоматично заповнює праву [форму].

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

Отже, я ще раз кажу: це помилка в Webkit.

— Пер Ліндберг
джерело