如何在打字时将占位符移动到焦点和顶部? [英] How to move placeholder to top on focus AND while typing?

问题描述

我希望占位符在文本框处于焦点上时以及在用户输入时移动到顶部.

我不确定这只是 html/css 还是任何 javascript.

我现在的 css 是这样的，我还没有 js 代码:

input:focus::-webkit-input-placeholder {字体大小:.75em；位置:相对；顶部:-15px；过渡:0.2s 缓出；}输入::-webkit-输入-占位符{过渡:0.2s 缓入；}输入[类型=文本"]:焦点，输入[类型=密码"]:焦点{高度:50px；填充底部:0px；过渡:0.2s 缓入；}输入[类型=文本"]，输入[类型=密码"] {高度:50px；过渡:0.2s 缓入；}

它几乎可以完成工作，但是当我开始打字时占位符消失了.我正在使用 twitter-bootstrap，如果这能让事情变得更容易！

谢谢.

解决方案

你可以这样做

HTML:

<input type="text" class="inputText"/><span class="floating-label">您的电子邮件地址</span>

CSS:

input:focus ~ .floating-label,输入:不(:焦点):有效〜.浮动标签{顶部:8px；底部:10px；左:20px；字体大小:11px；不透明度:1；}.输入文本 {字体大小:14px；宽度:200px；高度:35px；}.浮动标签{位置:绝对；指针事件:无；左:20px；顶部:18px；过渡:0.2s 缓所有；}

在这里工作 JSFiddle https://jsfiddle.net/273ntk5s/2/

I want the placeholder to move to the top when the textbox is on focus and also while the user is typing.

I'm not sure if this is just html/css or any javascript too.

My current css looks like this, and I have no js code yet:

input:focus::-webkit-input-placeholder {
    font-size: .75em;
    position: relative;
    top: -15px; 
    transition: 0.2s ease-out;
}

input::-webkit-input-placeholder {
    transition: 0.2s ease-in;
}

input[type="text"]:focus, input[type="password"]:focus {
    height: 50px;
    padding-bottom: 0px;
    transition: 0.2s ease-in;
}

input[type="text"], input[type="password"] {
    height: 50px;
    transition: 0.2s ease-in;
}

It almost does the work but the placeholder disappears when I start typing. I'm using twitter-bootstrap, if that makes anything easier!

Thanks.

解决方案

You could do it like this

HTML:

<div>
  <input type="text" class="inputText" />
  <span class="floating-label">Your email address</span>
</div>

CSS:

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: 8px;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}

Working JSFiddle here https://jsfiddle.net/273ntk5s/2/

这篇关于如何在打字时将占位符移动到焦点和顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！