- Автор: Чен Даютоу
- гитхаб:KRISACHAN
<input />Ярлыки — очень распространенные замещающие элементы в нашей повседневной разработке, но в последнее времяwhattwgа такжеMDNкогда я узнал с<input />Есть много связанных атрибутов, а селекторы почти не использовались, поэтому я начну эту статью, чтобы систематизировать некоторые интересные или практические знания.
В этой статье по умолчанию используется то, что все уже знают<input />Основное использование тегов не будет объясняться слишком много~
Неожиданно эти селекторы на самом деле связаны с вводом...
На момент написания статьи, согласно последнимdraftsОбратите внимание, что есть 3 категории и 16 вариантов, связанных с вводом. На самом деле, они весьма полезны, и их правильное использование улучшит наш пользовательский опыт.
Давайте разделим роль этих трех категорий селекторов:
Категория 1: состояния управления вводом
| Селектор | эффект |
|---|---|
| :enabled | Выбор может использовать состояние<input />элемент |
| :disabled | выбрать недоступный<input />элемент |
| :read-only | Выберите элементы в нередактируемом состоянии (не только<input />) |
| :read-write | Выберите элементы в редактируемом состоянии (не только<input />) |
| :placeholder-shown | Выберите элемент, в котором отображается текст заполнителя |
| :default | выбрать в<button>,<input type="checkbox" />,<input type="radio" />, так же как<option>состояние по умолчанию включено |
Категория 2: Состояния входных значений
| Селектор | эффект |
|---|---|
| :checked | Выберите выбранный<input type="radio" />
|
| :indeterminate | Выбор элементов формы с неопределенным состоянием аналогичен<progress>
|
Категория 3: Следственный отдел (проверка входной стоимости)
| Селектор | эффект |
|---|---|
| :blank | Когда выбор пуст<input>, в настоящее время не поддерживается браузерами |
| :valid | Выберите элемент формы, прошедший проверку |
| :invalid | Выберите элементы формы, которые не прошли проверку |
| :in-range | Выбрать в указанном диапазоне<input />
|
| :out-of-range | Выберите не в указанном диапазоне<input />
|
| :required | Выберите необходимые элементы формы |
| :optional | Выберите необязательные элементы формы |
| :user-invalid | Выберите, когда пользовательский ввод, но недопустимое значение<input />, в настоящее время не поддерживается браузерами |
Ужасно, помимо селекторов, это как-то связано с этими атрибутами
<input>В дополнение к множеству связанных селекторов существуют также различные атрибуты, которые можно использовать в сочетании с разными типами. Их роль заключается в следующем:
| Атрибуты | эффект |
|---|---|
| maxlength | Максимальная длина, которую можно ввести |
| minlength | Минимальная длина, которую можно ввести |
| size | длина поля ввода |
| readonly | Является ли поле ввода доступным только для чтения |
| required | Поле ввода обязательно? |
| multiple | Может ли поле ввода быть выбрано несколькими |
| pattern | правила проверки поля ввода |
| min | Минимальное значение, которое можно ввести |
| max | Максимальное значение, которое можно ввести |
| step | Приращение поля ввода каждый раз |
| list | Необязательные данные значения, привязанные к полю ввода |
| placeholder | Предварительно выбранный текст в поле ввода |
настоящий бой
Благодаря трем вышеуказанным категориям описаний у нас есть общее понимание<input />Отметьте связанную информацию, но вы думаете, что я здесь, чтобы перечислить?
Конечно, есть также практические упражнения ~
Чистый CSS реализует функцию отправки формы
Во-первых, давайте взглянем на карту эффектов.
Вышеупомянутый эффект — это функция отправки формы, реализованная на чистом CSS, как это достигается? Давайте посмотрим на исходный код напрямую, а затем разделим его шаг за шагом (если вы не хотите его видеть, вы можете напрямую протестировать исходный код ниже CV~)
<style>
:root {
--error-color: red;
}
.form > input {
margin-bottom: 10px;
}
.form > .f-tips {
color: var(--error-color);
display: none;
}
input[type="text"]:invalid ~ input[type="submit"],
input[type="password"]:invalid ~ input[type="submit"] {
display: none;
}
input[required]:focus:invalid + span {
display: inline;
}
input[required]:empty + span {
display: none;
}
input[required]:invalid:not(:placeholder-shown) + span {
display: inline;
}
</style>
<form class="form" id="form" method="get" action="/api/form">
账号：
<input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required />
<span class="f-tips">请输入正确的账号</span>
<br />
密码：
<input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required />
<span class="f-tips">请输入正确的密码</span>
<br />
<input name="button" type="submit" value="提交" />
</form>
Шаг 1: Напишите инфраструктуру
Во-первых, давайте напишем базовую структуру, код выглядит следующим образом:
<style>
:root {
--error-color: red;
}
.form > input {
margin-bottom: 10px;
}
.form > .f-tips {
color: var(--error-color);
display: none;
}
</style>
<form class="form" id="form" method="get" action="/api/form">
账号：
<input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required />
<span class="f-tips">请输入正确的账号</span>
<br />
密码：
<input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required />
<span class="f-tips">请输入正确的密码</span>
<br />
<input name="button" type="submit" value="提交" />
</form>
На первый взгляд, гм, это довольно просто, и все они обычно используются. Ха, нет, этоpatternЧто это такое?
Здесь мы сосредоточимся на обменеpatternэтот атрибут, который являетсяinput[value]Является ли это допустимым атрибутом, содержимое внутри соответствует значению, а грамматика является обычной грамматикой. Пример выглядит следующим образом:
<label>
<!--
当前pattern的内容就是验证input[name="part"]的value的，其规则如同里面的正则一样，匹配input[name="part"]的value是否是一个数字+3个大写字母
-->
<input pattern="[0-9][A-Z]{3}" name="part" />
</label>
Конечно, разныеinput[type]также по умолчанию с соответствующимpattern,Напримерinput[type="email"]По умолчанию выполняются следующие правила:
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
Шаг 2: Основные характеристики
input[type="text"]:invalid ~ input[type="submit"],
input[type="password"]:invalid ~ input[type="submit"] {
display: none;
}
input[required]:focus:invalid + span {
display: inline;
}
input[required]:empty + span {
display: none;
}
input[required]:invalid:not(:placeholder-shown) + span {
display: inline;
}
Вышеизложенное является реализацией основного взаимодействия.
Прежде всего, первый класс должен гарантировать, что два поля ввода будут скрыты, когда они терпят неудачу, то есть, когда значение поля ввода пусто или не соответствует правилам проверки, кнопка отправки скрыта.
Второй и третий класс контролируют, когда пользователь вводит содержимое в поле ввода, если оно не соответствует правилам проверки, будет отображаться сообщение об ошибке, в противном случае оно будет скрыто.
Используется четвертый класс.placeholderЕсть ли возможность управлять отображением и скрытием сообщений об ошибках, еслиplaceholderЕсли оно не отображается, это доказывает, что пользователь вводит, и сообщение об ошибке оценивается в соответствии со значением, введенным пользователем, независимо от того, отображается оно или скрыто, в противном случае оно скрыто.
переключатель состояния
Выше мы упомянули селектор:indeterminate, это используется для выбора элементов формы с неопределенным состоянием и<progress>, Любой, кто играл в тральщик, знает, что помимо выбора красного флажка, вы также можете выбрать вопросительный знак, щелкнув правой кнопкой мыши, что выбрать, но не уверен;promiseизpendingтип государства, междуresolveа такжеrejectмежду.
слишком:indeterminateЭто принесет нам массу интересных впечатлений.
Сначала давайте посмотрим на его варианты использования.
Основное использование
Первый взгляд на эффект
код показывает, как показано ниже:
<style>
body {
background: #333;
color: #fff;
padding: 20px;
text-align: center;
}
input {
margin-right: .25em;
width: 30px;
height: 30px;
}
label {
position: relative;
top: 1px;
font-size: 30px;
}
</style>
<form>
<input type="checkbox" id="checkbox">
<label for="option">点击左边</label>
</form>
<script>
'use strict';
checkbox.addEventListener('click', ev => {
if (ev.target.readOnly) {
ev.target.checked = ev.target.readOnly = false;
} else if (!ev.target.checked) {
ev.target.readOnly = ev.target.indeterminate = true;
};
});
</script>
На самом деле, здесь нет сложной реализации, просто сделать оценку промежуточного состояния, очень легко реализовать переключение радио с тремя состояниями.
Показать онемение кожи головы
Первый взгляд на эффект
(Этот эффект небесного шоу взят из фильма Бена Сабо.codepen, Если вам интересно, можете внимательно изучить. Когда же я смогу быть таким же хорошим, как большой парень, 嘤嘤嘤~)
Необязательное значение для привязки к полю ввода
Первый взгляд на эффект
На самом деле код очень простой:
<input type="text" list="names" multiple />
<datalist id="names">
<option value="kris">
<option value="陈大鱼头">
<option value="深圳金城武">
</datalist>
<input type="email" list="emails" multiple />
<datalist id="emails">
<option value="chenjinwen77@foxmail.com" label="kris">
<option value="chenjinwen77@gmail.com" label="kris">
</datalist>
<input type="date" list="dates" />
<datalist id="dates">
<option value="2019-09-03">
</datalist>
Принцип здесь через<input list="dates" />Для привязки списка данных, который необходимо отображать в выпадающем списке<datalist id="dates">.
Затем, когда мы хотим добиться ассоциации ввода, мы также можем изменить<datalist id="dates">Вместо того, чтобы писать множество операционных функций для достижения этой цели.
Суммировать
фактически<input />Есть также много интересных функций тегов, которые можно изучить.Разные типы в сочетании с разными селекторами и атрибутами могут иметь более удивительные возможности. Если вы заинтересованы, вы можете открыть свой разум и реализовать некоторые интересные функции самостоятельно, или, если у вас есть интересные идеи, вы можете оставить сообщение Yutou ниже или добавить Yutou WeChat"Krischans95"общаться.
пасхальные яйца
После того, как мне напомнили друзья из Digging и Weibo, я нашел более интересную пасхалку.Я чувствую, что эту статью следует переименовать в «В шоке, статья на самом деле вызвала Digging и Weichat». . . 》
постскриптум
Если вам нравится обсуждать технологии или у вас есть какие-либо комментарии или предложения по этой статье, вы можете добавить друзей Yutou в WeChat для совместного обсуждения.Конечно, Yutou также надеется поговорить с вами о жизни, хобби и поболтать. WeChat ID Fish Head: krisChans95 Вы также можете отсканировать код, чтобы подписаться на официальный аккаунт и подписаться на более интересный контент.