В настоящее время нет способа выбрать родительский элемент элемента в CSS.
Если бы был способ сделать это, это было бы в любой из текущих спецификаций селекторов CSS:
Тем временем, вам придется прибегнуть к JavaScript, если вам нужно выбрать родительский элемент.
Рабочий блок для выбора уровня 4 включает псевдокласс класса :has()
, который работает аналогично реализации jQuery . По состоянию на 2018 год это все равно не поддерживается никаким браузером .
Используя :has()
, исходный вопрос можно было бы решить с помощью этого:
li:has(> a.active) { /* styles to apply to the li tag */ }
Попробуйте это. Я знаю, что вопрос несколько старый, но это другой подход к проблеме.
Я также заметил, что проблема возникает чуть выше поля password
.
Я попробовал как методы, подобные
<form autocomplete="off">
и <input autocomplete="off">
, но ни один из них не работал для меня.
Поэтому я исправил его с помощью нижеприведенного фрагмента - просто добавил другое текстовое поле чуть выше типа пароля (f5).
Что-то вроде этого:
<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />
Надеюсь, что это поможет кому-то.
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
добавление атрибута readonly к тегу вместе с удалением события onfocus устраняет проблему
В этом есть две части. Chrome и другие браузеры будут помнить ранее введенные значения для имен полей и предоставлять на этот счет список автозаполнения для пользователя (в частности, входы типа пароля никогда не запоминаются таким образом по довольно очевидным причинам). Вы можете добавить autocomplete="off"
, чтобы предотвратить это на таких вещах, как ваше поле электронной почты.
Однако у вас есть пароли. Большинство браузеров имеют свои собственные встроенные реализации, а также множество сторонних утилит, которые предоставляют эту функцию. Это вы не можете остановить . Это пользователь, сделавший свой выбор, чтобы сохранить эту информацию, которая будет автоматически заполнена позже, и полностью выходит за рамки и сферу влияния вашего приложения.
Иногда даже autocomplete=off
не будет препятствовать заполнению учетных данных в неправильные поля.
Обходной путь состоит в том, чтобы отключить автозаполнение браузера с использованием режима readonly и установить запись в фокусе:
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
Событие focus
происходит при щелчках мыши и перемещении по полям.
Обновление:
Mobile Safari устанавливает курсор в поле, но не показывает виртуальную клавиатуру. Это новое обходное решение работает, как раньше, но обрабатывает виртуальную клавиатуру:
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />
Live Demo https://jsfiddle.net/danielsuess/n0scguv6/
// UpdateEnd
Объяснение: Авторизатор автоматически заполняет учетные данные в неправильном текстовом поле?
неправильно заполняет входные данные, например, заполняя телефонный ввод адресом электронной почты
Иногда я замечаю это странное поведение в Chrome и Safari, когда есть поля пароля в в той же форме. Я полагаю, браузер ищет поле пароля для вставки сохраненных учетных данных , Затем он запустит имя пользователя в ближайшее текстовое поле ввода, которое появляется перед полем пароля в DOM (просто гадание из-за наблюдения). Поскольку браузер - последний экземпляр, и вы не можете его контролировать,
Это исправленное выше исправление работало для меня.
dummy
, а затем снова удалить значение? Добавление и удаление readonly звучит как опасный ход - что, если браузер не хочет, чтобы вы сосредоточились на нем?
– rybo111
13 June 2015 в 22:02
Если вы реализуете функцию окна поиска, попробуйте установить атрибут type
на search
следующим образом:
<input type="search" autocomplete="off" />
Это работает для меня в Chrome v48 и выглядит законной разметкой :
В некоторых случаях браузер будет продолжать предлагать значения автозаполнения, даже если атрибут автозаполнения отключен. Это неожиданное поведение может быть довольно загадочным для разработчиков. Трюк, который действительно заставляет no-autocompletion - назначить случайную строку атрибуту, например:
autocomplete="nope"
Согласно Отчет об ошибке Chromium # 352347 Chrome больше не соблюдает autocomplete="off|false|anythingelse"
, ни на формах, ни на входах.
Единственное решение, которое сработало для меня, заключалось в том, чтобы добавить поле фиктивного пароля:
<input type="password" class="hidden" />
<input type="password" />
Для коммандов паролей имени пользователя это непростая задача. Эвристика Chrome ищет шаблон:
<input type="text">
, за которым следуют:
<input type="password">
Просто нарушите этот процесс, сделав недействительным это:
<input type="text">
<input type="text" onfocus="this.type='password'">
Это так просто и сложно:)
google chrome в основном ищет каждый первый видимый элемент пароля внутри тегов <form>
, <body>
и <iframe>
, чтобы включить автозаполнение для них, поэтому чтобы отключить это, вам нужно добавить элемент фиктивного пароля в качестве следующего:
<form>
вам нужно сразу же принести фиктивный элемент в качестве первого элемента в вашей форме после <form>
открыть тег, если ваш элемент пароля, не входящий в тег <form>
, помещает фиктивный элемент в качестве первого элемента на вашей странице html сразу после <body>
открытого тега display:none
, поэтому в основном используйте следующий элемент как фиктивный пароль. <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
Я столкнулся с такой же проблемой. И вот решение для отключения автоматического заполнения имени пользователя & amp; пароль в Chrome (только что протестирован только с Chrome)
<!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
<input type="tel" hidden />
<input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">
Вот грязный хак -
У вас есть свой элемент здесь (добавление отключенного атрибута):
<input type="text" name="test" id="test" disabled="disabled" />
И затем внизу вашей веб-страницы поставьте некоторый JavaScript:
<script>
setTimeout(function(){
document.getElementById('test').removeAttribute("disabled");
},100);
</script>
попробуйте пробел в значении:
<input type="email" name="email" value=" ">
<input type="password" name="password" value=" ">
chrome 54.0.2840.59
Для меня простой
<form autocomplete="off" role="presentation">
Сделал это.
Протестировано в нескольких версиях, последняя попытка была включена в 56.0.2924.87
Ну, так как у всех нас есть эта проблема, я потратил некоторое время на создание рабочего расширения jQuery для этой проблемы. Google должен следовать разметке html, а не следовать Google
(function ($) {
"use strict";
$.fn.autoCompleteFix = function(opt) {
var ro = 'readonly', settings = $.extend({
attribute : 'autocomplete',
trigger : {
disable : ["off"],
enable : ["on"]
},
focus : function() {
$(this).removeAttr(ro);
},
force : false
}, opt);
$(this).each(function(i, el) {
el = $(el);
if(el.is('form')) {
var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
el.find('input').autoCompleteFix({force:force});
} else {
var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
if (settings.force && !enabled || disabled)
el.attr(ro, ro).focus(settings.focus).val("");
}
});
};
})(jQuery);
. Просто добавьте это в файл, например /js/jquery.extends.js, и включите его в jQuery. Примените его к каждому элементу формы при загрузке документа следующим образом:
$(function() {
$('form').autoCompleteFix();
});
Предложение Майка Нельсона не помогло мне в Chrome 50.0.2661.102 m. Просто добавив элемент ввода того же типа с дисплеем: ни один набор больше не отключает автозавершение собственного браузера. Теперь необходимо дублировать атрибут имени поля ввода, для которого вы хотите отключить автозаполнение.
Кроме того, чтобы избежать дублирования поля ввода, когда оно находится внутри элемента формы, вы должны поместить отключенный на элемент, который не отображается. Это предотвратит отправку этого элемента как часть действия формы.
<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">
Разное решение, основанное на webkit. Как уже упоминалось, в любое время Chrome находит поле пароля, которое автоматически заполняет электронное письмо. AFAIK, это независимо от автозаполнения = [независимо].
Чтобы обойти это изменение, введите тип ввода в текст и примените шрифт безопасности webkit в любой форме.
.secure-font{
-webkit-text-security:disc;}
<input type ="text" class="secure-font">
Из того, что я вижу, это по крайней мере безопасно, как тип ввода = пароль, он защищен от копирования и вставки. Однако он уязвим, удалив стиль, который удалит звездочки, конечно тип ввода = пароль может быть легко изменен на тип ввода = текст в консоли, чтобы выявить любые автозавершенные пароли, так что это практически то же самое.
type="password"
.
– epelc
6 March 2016 в 05:17
Я только что обнаружил, что если у вас есть запоминающееся имя пользователя и пароль для сайта, текущая версия Chrome автоматически запустит ваше имя пользователя / адрес электронной почты в поле до любого поля type=password
. Не важно, что называется полем - просто принимает поле до того, как пароль будет вашим именем пользователя.
Old Solution
Просто используйте <form autocomplete="off">
, и это предотвращает предварительную загрузку пароля а также любое эвристическое заполнение полей на основе допущений, которые может сделать браузер (которые часто ошибочны). В отличие от использования <input autocomplete="off">
, который, похоже, в значительной степени игнорируется автозаполнением пароля (в Chrome, который Firefox выполняет его).
Обновленное решение
Chrome теперь игнорирует <form autocomplete="off">
. Поэтому мое первоначальное обходное решение (которое я удалил) теперь все в ярости.
Просто создайте пару полей и сделайте их скрытыми с помощью «display: none». Пример:
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
Затем поместите свои реальные поля внизу.
Не забудьте добавить комментарий или другие люди в вашей команде задаться вопросом, что вы делаете!
Обновить март 2016
Просто протестирован с последним Chrome - все хорошо. Это довольно старый ответ, но я хочу просто упомянуть, что наша команда уже много лет использует его на десятках проектов. Он по-прежнему отлично работает, несмотря на несколько комментариев ниже. Нет проблем с доступностью, потому что поля display:none
означают, что они не получают фокуса. Как я уже говорил, вам нужно поставить перед вашими реальными полями.
Если вы используете javascript для изменения вашей формы, вам понадобится дополнительный трюк. Покажите поддельные поля, пока вы манипулируете формой, а затем снова скройте их через миллисекунду позже.
Пример кода с использованием jQuery (если вы дадите свои поддельные поля классу):
$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
},1);
Обновление июля 2018 г.
Мое решение больше не работает так хорошо, Эксперты по анти-юстиции Chrome очень усердно работали. Но они бросили нам кость в виде:
<input type="password" name="whatever" autocomplete="new-password" />
Это работает и в основном решает проблему.
Однако это не работает, когда у вас нет поля пароля, но только адрес электронной почты. Это также может быть трудно заставить его перестать желтеть и предварять. Решение фальшивых полей может быть использовано для исправления этого.
На самом деле вам иногда нужно сбросить два лота поддельных полей и попробовать их в разных местах. Например, у меня уже были поддельные поля в начале моей формы, но Chrome недавно начал заполнять поле «Электронная почта» снова, поэтому я удвоил и добавил больше фальшивых полей непосредственно перед полем «Электронная почта» и исправил его , Удаление первой или второй партии полей возвращается к некорректному избыточному автозаполнению.
autocomplete="I told you I wanted this off, Google. But you would not listen."
– rybo111
13 June 2015 в 21:45
Вместо ответов «это то, что сработало для меня» и других ответов, которые выглядят как полные хаки ... В настоящее время хром (и последняя спецификация) обрабатывает атрибуты autocomplete
на ваших input
элементах:
https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=ru
TLDR: добавьте autocomplete='<value>'
на ваши входы, где <value>
должна быть любой строкой, определяющей, для чего это поле. Это работает аналогично атрибуту name
. Используйте возможные значения по ссылке выше, где это возможно.
Также удалите атрибут автозаполнения из вашей формы
Установив autocomplete
в off
, должен работать здесь. У меня есть пример, который используется Google на странице поиска. Я нашел это из элемента проверки.
edit: В случае, если off
не работает, попробуйте false
или nofill
. В моем случае он работает с chrome версии 48.0
Мне действительно не нравилось создавать скрытые поля, я думаю, что это делает действительно очень запутанным очень быстро.
В полях ввода, которые вы хотите остановить из авто полностью это будет работать. Сделайте поля только для чтения, а на фокусе удалите этот атрибут, подобный этому
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
. Что это значит, вам сначала нужно удалить атрибут только для чтения, выбрав поле и в то время наиболее вероятно, что вы заселяетесь с вашим собственным пользовательским вводом и наклоном автозаполнения, чтобы взять на себя
После нескольких месяцев и месяцев борьбы я обнаружил, что решение намного проще, чем вы могли себе представить:
Вместо autocomplete="off"
используйте autocomplete="false"
;)
Так просто, и это работает как шарм в Google Chrome.
Я обнаружил, что добавление этого в форму не позволяет Chrome использовать Autofill.
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>
Найден здесь. https://code.google.com/p/chromium/issues/detail?id=468153#hc41
Неутешительно, что Chrome решил, что он знает лучше, чем разработчик о том, когда нужно автозаполнять. Имеет в себе настоящую Microsoft.
Если у вас возникли проблемы с сохранением заполнителей, но отключив автозаполнение хрома, я нашел это решение.
Проблема
HTML
<div class="form">
<input type="text" placeholder="name"><br>
<input type="text" placeholder="email"><br>
<input type="text" placeholder="street"><br>
</div>
http://jsfiddle.net/xmbvwfs6/1/
В приведенном выше примере все еще возникает проблема автозаполнения, но если вы используете required="required"
и некоторый CSS, вы можете реплицировать заполнители, и Chrome не получит теги.
Решение
HTML
<div class="form">
<input type="text" required="required">
<label>Name</label>
<br>
<input type="text" required="required">
<label>Email</label>
<br>
<input type="text" required="required">
<label>Street</label>
<br>
</div>
CSS
input {
margin-bottom: 10px;
width: 200px;
height: 20px;
padding: 0 10px;
font-size: 14px;
}
input + label {
position: relative;
left: -216px;
color: #999;
font-size: 14px;
}
input:invalid + label {
display: inline-block;
}
input:valid + label {
display: none;
}
input
фокусироваться, если пользователь нажимает кнопку «поддельный». placeholder: $("label").on("click",function(){ $(this).prev().focus(); });
Обратите внимание, что label
не может быть до input
... Chrome находит это! Хорошее творческое решение! +1
– Louys Patrice Bessette
30 March 2017 в 20:38
Вот мои предлагаемые решения, так как Google настаивает на том, чтобы переопределять каждую работу, которую люди, похоже, делают.
Установите значения входов к примеру для вашего пользователя (например, your@email.com
) или метки поля (например, Email
) и добавить к вашим входам класс, называемый focus-select
:
<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">
И вот jQuery:
$(document).on('click', '.focus-select', function(){
$(this).select();
});
Я действительно не вижу, как Chrome когда-либо возится со значениями. Это было бы безумием. Надеемся, это безопасное решение.
Предполагая, что у вас есть два входа, например, адрес электронной почты и пароль, установите значение поля электронной почты в " "
(пробел) и добавьте атрибут / значение autocomplete="off"
, затем очистите его с помощью JavaScript. Вы можете оставить значение пароля пустым.
Если у пользователя нет JavaScript по какой-либо причине, убедитесь, что вы обрезаете их входную серверную сторону (вероятно, вам все равно придется), если они не удалят пространство.
Вот jQuery:
$(document).ready(function() {
setTimeout(function(){
$('[autocomplete=off]').val('');
}, 15);
});
Я установил тайм-аут на 15
, потому что 5
, казалось, работал иногда в моих тестах, поэтому утроение этого числа кажется безопасная ставка.
Невыполнение начального значения пробела приводит к тому, что Chrome оставляет входной сигнал желтым, как если бы он автоматически заполнял его.
Поместите это в начало формы:
<!-- Avoid Chrome autofill -->
<input name="email" class="hide">
CSS:
.hide{ display:none; }
Убедитесь, что вы храните заметку в формате HTML, чтобы ваши другие разработчики не Не удаляйте его! Также убедитесь, что имя скрытого ввода релевантно.
Ранее введенные значения, кэшированные хром, отображаются в списке выпадающего списка. Это может быть отключено с помощью автозаполнения = выключено, явно сохраненный адрес в расширенных настройках хром дает всплывающее окно автозаполнения, когда поле адреса получает фокус. Это можно отключить автозаполнением = «false» .Но это позволит хром отображать кешированные значения в раскрывающемся списке.
В поле ввода html после этого будут отключены оба.
Role="presentation" & autocomplete="off"
При выборе полей ввода для адреса autofill Chrome игнорирует те поля ввода, которые не имеют предшествующего элемента html метки.
Чтобы гарантировать, что анализатор хрома игнорирует поле ввода для адреса автозаполнения, скрытая кнопка или управление изображением могут быть добавлены между меткой и текстовым полем. Это приведет к нарушению последовательности обработки хрома для создания пары меток для автозаполнения. Флажки игнорируются при разборе адресов полей
. Chrome также учитывает атрибут «для» в элементе label. Его можно использовать для прерывания последовательности анализа хрома.
Использовать css text-security: диск без использования type = password.
html
<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />
or
<form autocomplete='off'>
<input type='text' name='user' />
<input type='text' name='pass' class='secure' />
</form>
css
input.secure {
text-security: disc;
-webkit-text-security: disc;
}
Я не знаю почему, но это помогло и сработало для меня.
<input type="password" name="pwd" autocomplete="new-password">
Я понятия не имею, почему, но autocompelete = "new-password" отключает автозаполнение. Он работал в последней версии хром версии 49.0.2623.112.
Для новых версий Chrome вы можете просто поместить autocomplete="new-password"
в поле пароля и все. Я проверил его, отлично работает.
Получил этот отзыв от разработчика Chrome в этом обсуждении: https://bugs.chromium.org/p/chromium/issues/detail?id=370363 # c7
PS не забудьте использовать уникальные имена для разных полей, чтобы предотвратить автозаполнение.
Единственный способ, который работает для меня, это: (требуется jQuery)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
password
иactual_password
для законного поля, поскольку Google теперь, похоже, смотрит наname
. Однако это означает, что Chrome не сохранит пароль, , который я действительно хочу использовать i>. AAAAARRRRGHH! – rybo111 13 June 2015 в 21:55