Dies ist ein komisches. Heute früh habe ich Code für ein Formular mit Floating-Labels veröffentlicht. Das Problem war, dass die JS innerhalb des Codes, der sich registrieren würde, wenn der Cursor oder der Text in die Eingabe eingefügt worden wäre, nicht funktionierte, da die Beschriftung unabhängig davon, was Sie dort hineingaben, wieder zurückfließen würde.Floating Labels Eingabe nicht registrierenden Text
Als ich den Code postete ein paar Leute sagten, es funktionierte gut an ihrem Ende und sogar kopiert den Code zurück in jsfiddle und ihre Version bearbeitet. Ich nahm ihre Version des Codes, die funktionierte, und kopierte sie in eine leere js-Geige, um den Code zu vergleichen, und es hörte sofort auf, wieder zu arbeiten.
Kann mir bitte jemand helfen.
$(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>
Nur geändert Sie Ihren Code zu laufen und scheint mir in der neuesten Chrom – epascarello