Question

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

让我们说如果我填写名字： Bob The Builder，占位符也应该显示相同的'Bob The Builder'而不是'First Name'。

以下是相关代码：

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条件来显示其前一个占位符。我们可以在属性的帮助下管理该占位符。例如，我在这里使用名称来检索占位符。

请检查JSFiddle是否有任何疑问。

希望这有帮助。谢谢。

Answer 2

是的，有可能。使用以下jQuery代码作为其余输入的示例。

$("#fname").keyup(function() {
    $("label[for='fname']").html($(this).val());
});

说明：您选择要更改标签值（例如标签 fname ）的ID输入（例如 #fname ）您当前正在输入的值。

在此处查看更新后的JSFiddle：https://jsfiddle.net/NikolaosG/tyowcgut/3/

Answer 3

是的，keyup事件是处理此事件的最佳方式。但另外，您为每个输入使用多个事件处理程序 - 这是处理该方案的另一种方法。不是一个更好或更优先，只是一个选项。

＆＃13;

$('input').on({
  focusin: function() {
    $(this).parent().find('label').addClass('active');
  },
  focusout: function() {
    if (!this.value) {
      $(this).parent().find('label')
        .removeClass('active');
    }
  },
  keyup: function() {
    var newText = $(this).val();
    $(this).parent().find('label').text(newText);
  }
});

＆＃13;

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

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<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>

＆＃13;

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

3 个答案: