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

Question

我有一个动态表单，每次焦点位于特定字段时，标签文本都会移动到该字段上方并在输入值时停留在那里。这适用于 Name 和 Message 字段。我的问题是电话或电子邮件的联系方式。该字段根据选择的首选联系方式显示。但是当输入一个值时，在该字段失去焦点后，文本会返回并与用户输入的内容重叠。就选择元素而言，我尝试了很多不同的方法，但无法让这些领域合作。对于这个特定问题，我找不到任何东西。这是一个 Fiddle 形式：JS Fiddle 和下面的 sn-p。

$('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 中添加电话和电子邮件元素并相应地显示它们：

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