javascript - Form Rise-Input 并在填充 CSS 时重复文本

Question

我有一个目前工作正常的表单，唯一我希望它做的是当我填写文本时，占位符也应该显示我在字段中输入的内容。

假设我填写的是名字: Bob The Builder，占位符也应显示相同的“Bob The Builder”而不是“First Name”。

相关代码如下:

Form-rise-click here for fiddle

HTML:

<div class="wrap">
  <div>
    <label for="fname">First Name</label>
    <input id="fname" type="text" class="cool"/>
  </div>

  <div>
    <label for="lname">Last Name</label>
    <input id="lname" type="text" class="cool"/>
  </div>

  <div>
    <label for="email">Email</label>
    <input id="email" type="text" class="cool"/>
  </div>
</div>

CSS:

body {
  font-family: 'Lato', sans-serif;
  color: black;
  background-color: white;
}
h1 {
  font-size: 60px;
  margin: 0px;
  padding: 0px;
}
h3 {
  margin: 0px;
  padding: 0px;
  color: #999;
}

div.wrap {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
}

div.wrap div {
  position: relative;
  margin: 50px 0;
}

label {
  position: absolute;
  top: 0;
  font-size: 30px;
  margin: 10px;
  padding: 0 10px;
  background-color: white;
  -webkit-transition: top .2s ease-in-out, 
                      font-size .2s ease-in-out;
  transition: top .2s ease-in-out, 
              font-size .2s ease-in-out;
}

.active {
  top: -25px;
  font-size: 20px;
}

input[type=text] {
  width: 100%;
  padding: 20px;
  border: 2px solid black;
  font-size: 20px;
  background-color: white;
  color: black;
} 

input[type=text]:focus {
  outline: none;
}

jQuery:

$('input').on('focusin', function() {
  $(this).parent().find('label').addClass('active');
});

$('input').on('focusout', function() {
  if (!this.value) {
    $(this).parent().find('label').removeClass('active');
  }
});

Answer 1

我刚刚使用了 jquery 的 keyup()。它基本上是 javascript 事件的 keyup 的事件处理程序。

$('input').keyup(function(){    
  $(this).parent().find('label').text($(this).val())
});

请检查JSFiddle如有任何疑问。

这里有一个关于改善UX的小建议。

当输入值为空时，你可以给出一个小的 if 条件来显示它以前的占位符。我们可以在属性的帮助下管理该占位符。例如，我在这里使用 name 来检索占位符。

请检查JSFiddle如有任何疑问。

希望对您有所帮助。谢谢。