Question

我有一个动态表单，每次焦点在特定字段上时，标签文本移动到字段上方并在输入值时保持在那里。这适用于Name和Message字段。我的问题是电话或电子邮件的联系方式。该字段基于所选的首选联系方式显示。但是当输入值时，在该字段失去焦点后，文本将返回并与用户输入的内容重叠。就选择元素而言，我尝试了很多不同的东西，但是不能让这些领域合作。我还没能找到任何针对这个特定问题的东西。这是表格的小提琴：JS Fiddle和下面的片段。

＆＃13;

$('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');
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

这个想法。由于您动态添加了元素，因此需要在创建元素后向它们添加blur事件。将模糊事件包装到函数中，并在页面加载时调用它，并且每次更新输入元素后都调用它。

＆＃13;

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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

3 个答案: