1
Это странно. Ранее сегодня я опубликовал код для формы с плавающей меткой. Проблема заключалась в том, что JS внутри кода, который регистрировался бы, если бы курсор или текст был помещен во входные данные, не работал, потому что, независимо от того, что вы там вложили, метка вернется вниз.Ввод плавающих ярлыков, не регистрирующий текст
Когда я опубликовал код, несколько человек сказали, что он отлично работает на своем конце и даже скопировал код обратно в jsfiddle и ИХ ВЕРСИЯ РАБОТАЕТ. Я взял их версию кода, который работал, и скопировал его в пустую скрипту js, чтобы сравнить код, и он быстро прекратил работать снова.
Может ли кто-нибудь мне помочь.
$(function() {
$(".formStyle7 .input-group input").focusout(function() {
var text_val = $(this).val();
if (text_val === "") {
$(this).removeClass('has-value');
} else {
$(this).addClass('has-value');
}
});
});.formStyle7 {
display: block;
height: 750px;
width: 500px;
background-color: #FFFFFF;
border: none;
border-radius: 3px;
box-shadow: rgb(128, 128, 128) .1px .1px 5px, rgb(128, 128, 128) -.1px -.1px 5px;
margin: 30px auto;
}
input {
background: none;
border: 1px solid #21a1e1;
margin: 15px;
display: inline-block;
height: 30px;
width: 455px;
}
input:focus,
input:active {
outline: none;
}
input[type="text"],
input[type="email"] {
border: none;
border-bottom: 1px solid #b3c1cc;
}
.input-group {
position: relative;
}
.input-group label {
position: absolute;
left: 15px;
top: 30px;
font-style: italic;
font-size: 18px;
color: #999;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
transition: all 0.2s ease;
}
.input-group input:focus + label,
.input-group input.has-value + label {
top: 13px;
font-size: 12px;
color: #aaa;
}
#proposedWorkshopDDL {
background: none;
border: 1px solid #21a1e1;
margin: 15px;
display: inline-block;
height: 30px;
width: 455px;
}
#unitPresidentDDL {
background: none;
border: 1px solid #21a1e1;
margin: 15px;
display: inline-block;
height: 30px;
width: 455px;
}
.clearFix {
clear: both;
}
header {
height: 40px;
width: 500px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 24px;
color: #b3c1cc;
float: left;
margin: 25px 10px 0px 15px;
}
p {
height: 40px;
width: 500px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 20px;
color: #b3c1cc;
float: left;
margin-left: 15px;
margin-top: -5px;
}
.formContainer {
margin-top: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="formStyle7">
<header>OECTA PD Network Workshop</header>
<p>Workshop Application Form</p>
<div class="clearFix"></div>
<div class="formContainer">
<div class="input-group">
<input type="text" />
<label>First Name</label>
</div>
<div class="input-group">
<input type="text" />
<label>Last Name</label>
</div>
<div class="input-group">
<input type="email" />
<label>Email Address</label>
</div>
<div class="input-group">
<input type="text" />
<label>Contact Number</label>
</div>
<select id="unitPresidentDDL">
<option>Select</option>
<option>Unit 1</option>
<option>Unit 2</option>
<option>Unit 3</option>
</select>
<select id="proposedWorkshopDDL">
<option>Select</option>
<option>Workshop 1</option>
<option>Workshop 2</option>
<option>Workshop 3</option>
</select>
<div class="input-group">
<input type="text" />
<label>Date for Workshop</label>
</div>
<div class="input-group">
<input type="text" />
<label>Time for Workshop</label>
</div>
<div class="input-group">
<input type="text" />
<label>Location for Workshop</label>
</div>
<div class="input-group">
<input type="submit" />
</div>
</div>
Просто изменил свой код, чтобы работать, и мне кажется, что в последнем хроме – epascarello