浮動標簽輸入未注冊文本

Question

這是一個奇怪的。 今天早些時候，我發布了一個帶有浮動標簽的表單的代碼。 問題在於，如果將光標或文本放入輸入中，代碼中的 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>

Answer 1

我剛剛測試了你的代碼，它工作正常： https : //jsfiddle.net/jb013rqe/3/

但看起來您忘記將 jQuery 作為外部依賴項包含在內：

只需在外部資源部分添加一個 jquery cdn url，例如：

https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js

Answer 2

始終確保在頁面上加載了 jquery。

這對我來說似乎很好。 如果文本在輸入中，則輸入中的占位符會縮小並保持在那里。 嘗試把你的js放在這個

$(document).ready(function () {
   /*Code here*/
});

如果這不起作用，是否有任何控制台錯誤？