Я хочу создать форму, как показано выше. Может добавлять placeholder в текстовое поле. Но когда пользователь нажимает клавиши, заполнители заполнителей отсутствуют. Мне нужно показать заполнители над текстовым полем при нажатии клавиши внутри текстового поля.Как создать заполнитель с текстом
Вы можете использовать htmlrequired, autofocus и pattern атрибут с RegExp^[a-zA-Z]+(?:\s[a-zA-Z]+$|$), чтобы соответствовать один или несколько a-z символов чувствительны к регистру в начале ввода, затем пробел, затем один или более a-z символы нечувствительны к регистру на конец ввода или конец ввода для обработки двух первых имен, например "Billy Joe", "Norma Jean", "Sarah Jane"; <label> элемент, смежный с элементом <input>; css:invalid, :valid, :before; :after.
Когда input является :invalid установить border к red, outline к none; установленный смежный label элемент :beforecontent от до "das", content до !; в :valid:focus установить label:beforecontent к "First Name", label:after к UTF-8"CHECK MARK"✓
@charset "UTF-8";
#input {
height: 3.14em;
left: 0px;
outline: none;
padding: 6px;
margin: 4px;
width: 150px;
}
#input:valid {
border: 1px solid green;
box-shadow: .015em .015em .015em green;
}
#input:invalid {
border: 1px solid red;
box-shadow: .015em .015em .015em red;
}
#input:invalid + [for="input"]:before {
content: "das";
}
#input + [for="input"]:after {
font-weight: bold;
left: 160px;
top: 12px;
position: absolute;
}
#input:invalid + [for="input"]:after {
content: "!";
color: red;
}
#input:valid + [for="input"]:after {
content: "\2713";
color: green;
}
#input:valid + [for="input"]:before {
content: "First Name";
color: #ccc;
}
label[for="input"]:before {
position: absolute;
left: 12px;
padding: 6px;
}<meta charset="UTF-8" />
<input id="input" type="text" pattern="^[a-zA-Z]+(?:\s[a-zA-Z]+$|$)" required autofocus/>
<label for="input"></label>#lbl{
color:green;
}
#in{
border:none
}
#in,#in_container,#lbl{
background:white
}
#in_container{
display:inline-block;
border:solid 1px black;
}<div id="in_container">
<span id="lbl">First Name</span>
<br>
<input type='text' id="in">
</div>Некоторые CSS магии:
.input-group * {
left: 0;
position: absolute;
font-family: sans-serif;
}
.input-group input {
height: 30px;
font-size: 20px;
padding-top: 12px;
}
.input-group label {
padding-left: 3px;
padding-top: 2px;
opacity: .5;
}<div class="input-group">
<input id="first-name" type="text">
<label for="first-name">First Name</label>
</div>В принципе, просто поиграться с размером, пока вы не получите решение работает для вас. Я бы сгруппировал каждый раздел «поле ввода», они состоят из метки, наложенной на текстовый ввод.
#container {
position: relative;
}
#container * {
font-size: 20px;
}
#my-input {
height: 30px;
}
#lbl-my-input {
line-height: 1.5;
position: absolute;
color: #bebebe
}
#my-input:focus {
padding-top: 40px;
}<div id="container">
<label id="lbl-my-input" for="my-input">First</label>
<input id="my-input" type="text">
</div>Вот моя идея:
Я использую css для ввода: focus. Когда фокусировка происходит, я расширяю верхнюю часть ввода.
Остальное стиль (выбор) правая линия-высота, размер шрифта и отступы, чтобы сделать его красивым
У меня есть решение для этого.
<label style="visibility: hidden;" id="label">User Name</label>
<input id="textField" type="text" placeholder="User Name" onfocus="showLabel()" onblur="hideLabel()"></input>
<script>
function showLabel() {
var label = document.getElementById("label");
var textField = document.getElementById("textField");
textField.placeholder="";
label.style.visibility = "inherit";
}
function hideLabel() {
var label = document.getElementById("label");
var textField = document.getElementById("textField");
textField.placeholder="User Name";
if (!textField.value) {
label.style.visibility = "hidden";
}
}
</script>
Что вы пробовали? Покажите примеры кода, который не работает. StackOverflow не является бесплатной услугой кодирования. – rockerest