jQuery如果輸入字段具有值，則添加類

Question

我有一個動態表格，每當焦點位於特定字段上時，標簽文本就會移到該字段上方，並且如果輸入了值，則停留在該位置。 對於“名稱”和“消息”字段，這工作正常。 我的問題是電話或電子郵件的聯系方式。 該字段將根據選擇的首選聯系方式出現。 但是，當輸入一個值時，在該字段失去焦點之后，文本將返回並與用戶輸入的內容重疊。 就選擇元素而言，我嘗試了很多不同的方法，但是無法讓這些領域進行合作。 對於這個特定的問題，我還找不到任何東西。 這是表格的小提琴：下面的JS小提琴和摘錄。

 $('input').blur(function(event) { var inputValue = this.value; if (inputValue) { this.classList.add('value-exists'); } else { this.classList.remove('value-exists'); } }); $('input:radio[name=contact]').on('click', function(e) { var value = $('input:radio[name=contact]:checked').val(); if (value === 'Phone') { $('#contact-method').html('<input type="phone" name="phone" /><div class="label-text">Phone</div>').show('600'); } else if (value === 'Email') { $('#contact-method').html('<input type="email" name="email" /><div class="label-text">Email</div>').show('600'); } }); 

 form { font-family: 'PT Sans', sans-serif; } label { display: block; padding-top: 10px; } label .label-text { cursor: text; -moz-transform: translateY(-22px); -ms-transform: translateY(-22px); -webkit-transform: translateY(-22px); transform: translateY(-22px); transition: all 0.3s; } label input { background-color: transparent; border: 0; border-bottom: solid #777 2px; transition: all .03s; } label input:focus+.label-text { color: 'black'; text-transform: uppercase; transform: translateY(-55px); } label input.value-exists+.label-text { color: 'black'; text-transform: uppercase; transform: translateY(-55px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <form class="form" method="post" action=""> <label> <input type="text" name="name" /> <div class="label-text">Name</div> </label> <br /> <label> <input type="text" name="message" /> <div class="label-text">Message</div> </label> <br /> <p>How would you prefer to be contacted?</p> <label> <input class="contact" type="radio" name="contact" value="Email" /> Email <input class="contact" type="radio" name="contact" value="Phone" /> Phone </label> <br /> <label id="contact-method"> </label> <br /> <br /> <button>Submit</button> </form> </div> 

Answer 1

這個主意。 由於您是動態添加元素的，因此在創建元素后需要向其添加模糊事件。 將您的模糊事件包裝到一個函數中，並在頁面加載時以及每次更新輸入元素后調用它。

 function initInputBlur() { $('input').on('blur', function(event) { var inputValue = this.value; if (inputValue) { this.classList.add('value-exists'); } else { this.classList.remove('value-exists'); } }); } $('input:radio[name=contact]').on('click', function(e) { var value = $('input:radio[name=contact]:checked').val(); if (value === 'Phone') { $('#contact-method').html('<input type="phone" name="phone" /><div class="label-text">Phone</div>').show('600'); } else if (value === 'Email') { $('#contact-method').html('<input type="email" name="email" /><div class="label-text">Email</div>').show('600'); } initInputBlur(); }); //init initInputBlur(); 

 form { font-family: 'PT Sans', sans-serif; } label { display: block; padding-top: 10px; } label .label-text { cursor: text; -moz-transform: translateY(-22px); -ms-transform: translateY(-22px); -webkit-transform: translateY(-22px); transform: translateY(-22px); transition: all 0.3s; } label input { background-color: transparent; border: 0; border-bottom: solid #777 2px; transition: all .03s; } label input:focus+.label-text { color: 'black'; text-transform: uppercase; transform: translateY(-55px); } label input.value-exists+.label-text { color: 'black'; text-transform: uppercase; transform: translateY(-55px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <form class="form" method="post" action=""> <label> <input type="text" name="name" /> <div class="label-text">Name</div> </label> <br /> <label> <input type="text" name="message" /> <div class="label-text">Message</div> </label> <br /> <p>How would you prefer to be contacted?</p> <label> <input class="contact" type="radio" name="contact" value="Email" /> Email <input class="contact" type="radio" name="contact" value="Phone" /> Phone </label> <br /> <label id="contact-method"> </label> <br /> <br /> <button>Submit</button> </form> </div> 

Answer 2

由於您每次都要更改$('#contact-method').html ，因此請使用

$(document).on('blur', 'input', function(event) {

代替

$('input').blur(function(event) {

Answer 3

您可以在隱藏的div中添加phone和email元素，並相應地顯示它們：

<p>How would you prefer to be contacted?</p>
<label>
                            <input class="contact" type="radio"  name="contact" value="Email" /> Email
                            <input class="contact" type="radio" name="contact" value="Phone" /> Phone
                        </label>

<br />
<br />
<label>
<div id="phone" class="hidden">
<input type="phone" name="phone" /><div class="label-text">Phone</div>
</div>
</label>
<label>
<div id="email" class="hidden">
<input type="email" name="email" /><div class="label-text">Email</div>
</div>
</label>

然后在javascript中將其更改為：

$('input:radio[name=contact]').on('click', function(e) {
  var value = $('input:radio[name=contact]:checked').val();
  if (value === 'Phone') {
    $('#phone').removeClass("hidden");
    $('#email').addClass("hidden");
  } else if (value === 'Email') {
    $('#phone').addClass("hidden");
    $('#email').removeClass("hidden");
  }
});