浮動標簽

Question

我創建了一個表單，該表單模仿您在輸入空間中單擊時的浮動標簽效果，但是由於某種原因，在我的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'); } }); }); 

  body { background-color: #F4F4F4; } .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; } input[type="submit"] { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 20px; color: #b3c1cc; border: none; border-radius: 3px; box-shadow: rgb(122, 122, 122) .1px .1px 2px; } input[type="submit"]:active { color: white; background-color: #21a1e1; } 

 <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> <!--end formContainer --> </form> 

Answer 1

原來我問錯了問題。 該代碼本身很好，這是我忽略的JQuery附加組件，可以繼續使用該代碼的在線版本。 那就是所缺少的！