jQuery如果输入字段有值，添加类

Question

我有一个动态表单，并且每当焦点位于特定字段上时，标签文本在字段上方移动并在输入值时停留在那里。这适用于名称和消息字段。我的问题是电话或电子邮件的联系方式。该字段基于所选的首选联系方式显示。但是，当输入值时，在该字段失去焦点后，文本回落并重叠用户输入的内容。就选择元素而言，我尝试了一堆不同的东西，但无法让这些领域合作。我一直无法为这个特定问题找到任何东西。这是一个表格的小提琴：JS Fiddle和下面的代码片段。

$('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

您可以添加隐藏层和显示的电话和电子邮件元素他们相应地：

<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"); 
    } 
});