html 文本字段的 javascript 和 css 属性不起作用

Question

我修改了这个codepen pen https://codepen.io/dsholmes/pen/pyeeVQ?q=responsive%20popup&limit=all&order=popularity&depth=everything&show_forks=false

并在这支 codepen 笔中创建了我自己的表格 https://codepen.io/eilufoye/pen/RZEvMz

我遇到的问题是，在输入除名称以外的其他文本字段时，占位符/标签不会消失。

           /* ------------------------- */
      /* Contact Form Interactions */
    /* ------------------------- */
    $('#contact').on('click', function(event) {
   event.preventDefault();

$('#contactblurb').html('Questions, suggestions, and general comments are all welcome!');
$('.contact').addClass('is-visible');

if ($('#name').val().length != 0) {
  $('.name').addClass('typing');
}
if ($('#email').val().length != 0) {
  $('.email').addClass('typing');
}
if ($('#message').val().length != 0) {
  $('.message').addClass('typing');
}
  });

此代码处理标签交互

   /* ------------------- */
   /* Contact Form Labels */
   /* ------------------- */
   $('#name').keyup(function() {
  $('.name').addClass('typing');
  if ($(this).val().length == 0) {
   $('.name').removeClass('typing');
    }
    });
   $('#email').keyup(function() {
   $('.email').addClass('typing');
    if ($(this).val().length == 0) {
   $('.email').removeClass('typing');
    }
   });
   $('#message').keyup(function() {
    $('.message').addClass('typing');
    if ($(this).val().length == 0) {
   $('.message').removeClass('typing');
     }
   });

如何使“部件号”、“NSN”、“电子邮件”和“数量”标签/占位符在开始输入时像“名称”一样向左浮动？全部独立。同样，如何使“消息”像“附加说明”一样独立地向左浮动？

Answer 1

您设置的标签 for 属性和输入的 id 错误:

你总是写电子邮件:

<div class="email">
        <label for="email">Email</label>
        <input type="text" id="email" name="email" />
      </div>
      <div class="email">
        <label for="email">NSN</label>
        <input type="text" id="email" name="email" />
      </div>
      <div class="email">
        <label for="email">Part Number</label>
        <input type="text" id="email" name="email" />
      </div>
      <div class="message">
        <label for="message">Message</label>
        <textarea name="message" id="message" name="message"></textarea>
      </div>
      <div class="email">
        <label for="email">QTY</label>
        <input type="text" id="email" name="email" />
      </div>