Форма контакта WordPress 7 помеченная звездочкой [дубликат]
Когда вы пишете [x]*3, вы получаете, по существу, список [x, x, x]. То есть список с 3 ссылками на тот же x. Когда вы затем изменяете этот сингл x, он отображается через все три ссылки на него.
Чтобы исправить это, вам нужно убедиться, что вы создаете новый список в каждой позиции. Один из способов сделать это -
[[1]*4 for n in range(3)]
, который будет повторно оценивать [1]*4 каждый раз, а не оценивать его один раз и делать 3 ссылки на 1 список.
Вы можете удивиться почему * не может создавать независимые объекты так, как это делает понимание списка. Это потому, что оператор умножения * работает с объектами, не видя выражений. Когда вы используете * для умножения [[1] * 4] на 3, * видит только 1-элементный список [[1] * 4], а не текст выражения [[1] * 4. * не имеет понятия, как делать копии этого элемента, не знаю, как переоценить [[1] * 4], и не подозревайте, что вы даже хотите копировать, и вообще, возможно, даже не было способа скопировать элемент.
Единственный вариант * - это сделать новые ссылки на существующий подсписчик вместо того, чтобы пытаться создавать новые подсписки. Все остальное было бы непоследовательным или требовало бы значительного пересмотра основополагающих решений по языковому дизайну.
Напротив, понимание списка переоценивает выражение элемента на каждой итерации. [[1] * 4 for n in range(3)] пересчитывает [1] * 4 каждый раз по той же причине [x**2 for x in range(3)] каждый раз переоценивает x**2. Каждая оценка [1] * 4 генерирует новый список, поэтому понимание списка делает то, что вы хотели.
Кстати, [1] * 4 также не копирует элементы [1], но это не имеет значения , так как целые числа неизменны. Вы не можете сделать что-то вроде 1.value = 2 и превратить 1 в 2.
3 ответа
Вот кросс-браузерное решение, которое не использует Javascript:
Встроенные элементы, такие как input, не поддерживают :before и :after. Чтобы сделать вещи еще сложнее, селектор компоновщиков и их псевдоклассы не полностью поддерживаются всеми браузерами, как вы узнали.
Итак, обходным путем является добавление label, размещенного относительно поверх поле ввода с атрибутом for, указывающим на входное текстовое поле. Таким образом, когда пользователь нажимает метку (фальшивый заполнитель), фокус переходит в поле ввода.
Замените ваш class="required" на атрибут required="required". Это дает вам возможность использовать селектор : недействительный и : действительный .
<form>
<input type="text" id="name" name="name" required="required" />
<label for="name">Name</label>
<br/>
<input type="email" id="email" name="email" placeholder="Email" />
<br/>
<input type="submit" />
</form>
input {
width: 160px;
}
input[type=submit] {
width: auto;
}
input[required] + label {
color: #999;
font-family: Arial;
font-size: .8em;
position: relative;
left: -166px; /* the negative of the input width */
}
input[required] + label:after {
content:'*';
color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid + label {
display: inline-block;
}
/* hide the placeholder when input has some text typed in */
input[required]:valid + label{
display: none;
}
Поскольку письмо не требуется, оставьте родной заполнитель там и только для этого взлома для имени.
Я также поменял ваш адрес электронной почты с type="text" на type="email" для лучшего удобства пользователей на мобильных устройствах.
-
1какое кровавое большое использование требуется! – Jamie Hutber 24 August 2015 в 11:37
Тот же вопрос задан здесь
В принципе, ответ отрицательный. Зависит от браузера.
:before и :after не могут использоваться для некоторых элементов, таких как <input>. Это зависит от браузера, хотя, как кажется, хром может это сделать.
Возможно, его можно решить с помощью JavaScript? Я не знаю
Вдохновленный решением Хосе без использования «обязательного» атрибута, live demo также может делать то, что вы хотите.
Ключевая точка - css имеет селектор :not, см. на веб-сайт Mozilla