Question

您知道如何在Bootstrap或jQuery / JavaScript中执行以下功能吗？

带占位符文本的默认输入状态（即“电子邮件”占位符）
点击该输入
开始输入您的电子邮件地址
“电子邮件”占位符消失
出现“电子邮件”标签，并向上移动到输入的电子邮件地址和输入内部

您可以在Shopify上查看此演示：

转到https://simpletheme.myshopify.com/collections/all/products/contrast-jacket?variant=335385313
添加到购物车
查看购物车
结帐
在“电子邮件”输入法中输入电子邮件地址

这是Plunker的起点：

https://plnkr.co/edit/bd9yGmgKfK53Tpn8rCSp?p=preview

<!DOCTYPE html>
<html>

<head>
  <style>
    label {
      display: none;
    }
  </style>
</head>

<body>
  <label>Email</label>
  <br />
  <input placeholder="Email" />
</body>

</html>

非常感谢有关如何复制此功能的任何建议。

Answer 1

不幸的是，CSS无法完成这一操作，因为您无法根据实际值来定位输入。（在这里阅读更多Detect if an input has text in it using CSS -- on a page I am visiting and do not control?）

所以从上面的帖子中获取的诀窍就是听取输入信息。事件并添加一个类来标记输入有值。如果您碰巧显示一些带有预填充输入的输入，则必须在页面加载后运行该功能。

技巧的其余部分是将标签放在输入上方，并确保输入有足够的填充，这样两个文本不会重叠。我会根据您的需要为您提供造型的优点。

＆＃13;

$('.labeled_input_group input').on("change keyup keydown",function(e){
  var elem = $(this);
  if(elem.val()){
     elem.closest('.labeled_input_group').addClass('hasValue');
  }else{
    elem.closest('.labeled_input_group').removeClass('hasValue');
  }
});

＆＃13;

.labeled_input_group{
  position:relative;
}

label{
  display:none;
  position:absolute;
  top:0px;
  font-size:12px;
}
.labeled_input_group input{
  
}

.labeled_input_group.hasValue label{
  display:block;
}
.labeled_input_group.hasValue input{
  padding-top:14px;
  font-size:12px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  
</head>

<body>
<div class="labeled_input_group">
  <label>Email</label>
  <input placeholder="Email"/>
  </div>
</body>

</html>

＆＃13;

Answer 2

要复制此功能，您可以使用label和包装元素（div）。给div相对位置和标签一个绝对位置并对齐，使其位于input之上。

然后你可以连接jQuery（或者vanilla JS也会很好）并监听focus和blur事件。当输入被聚焦时，您可以添加另一个类的标签，然后在blur上向上移动它，您应该通过input检查event.target.value的内容，看看它是否＆＃ 39; s为空，如果是，则从标签中移除该类，使其向上移动。

希望指出你正确的方向。

要考虑的几个要点：

输入可以通过其他方式填充（无需获得焦点），就像通过另一个JavaScript函数一样。您也应该检查一下，否则标签将覆盖文本。
以这种方式阻碍标签是个好主意吗？从UI / UX的角度来看，将文本放在您希望用户也放置一些文本的位置并不是一个好主意。看起来似乎已经填写了输入。
通过使标签向上移动，您也可以缩小标签，这意味着它对于很多人来说不太容易阅读和阅读。

输入文本后，表单标签出现在输入内部

2 个答案: