Html 如何在打字时将占位符移动到焦点和顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35942247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to move placeholder to top on focus AND while typing?
提问by Bivo Kasaju
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.
我不确定这只是 html/css 还是任何 javascript。
My current css looks like this, and I have no js code yet:
我当前的 css 看起来像这样，我还没有 js 代码：
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!
它几乎可以完成工作，但是当我开始打字时占位符消失了。我正在使用 twitter-bootstrap，如果这让事情变得更容易的话！
Thanks.
谢谢。
回答by
You could do it like this
你可以这样做
HTML:
HTML：
<div>
<input type="text" class="inputText" />
<span class="floating-label">Your email address</span>
</div>
CSS:
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/
在这里工作 JSFiddle https://jsfiddle.net/273ntk5s/2/
回答by Dinu Mathai
.user-input-wrp {
position: relative;
width: 50%;
}
.user-input-wrp .inputText{
width: 100%;
outline: none;
border:none;
border-bottom: 1px solid #777;
box-shadow: none !important;
}
.user-input-wrp .inputText:focus{
border-color: blue;
border-width: medium medium 2px;
}
.user-input-wrp .floating-label {
position: absolute;
pointer-events: none;
top: 18px;
left: 10px;
transition: 0.2s ease all;
}
.user-input-wrp input:focus ~ .floating-label,
.user-input-wrp input:not(:focus):valid ~ .floating-label{
top: 0px;
left: 10px;
font-size: 13px;
opacity: 1;
}<h1>The floating label</h1>
<div class="user-input-wrp">
<br/>
<input type="text" class="inputText" required/>
<span class="floating-label">Your email address</span>
</div>Modified the code from @user1846747 a little.
稍微修改了@user1846747 的代码。
回答by Srinivasan N
Only using HTML and css
仅使用 HTML 和 css
.searchformfld{
position: relative;
margin: 5px 0px;
}
.searchformfld label{
position: absolute;
padding-left: 10px;
top:15px;
cursor: text;
}
.searchformfld input:focus + label,.searchformfld input:not(:placeholder-shown) + label{
opacity:1;
transform: scale(.9) translateY(-100%) translateX(-10px);
color:#000;
}
.searchformfld input:focus{
border:1px solid #000;
outline-color: #000;
}
.searchformfld{
padding: 15px;
margin:15px 0px;
}
.searchformfld input{
width:100%;
padding-left: 10px;
}
.searchformfld label,.searchformfld input{
transition: all 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}<div class="searchformfld">
<input type="text" class="candidateName" id="candidateName" name="candidateName" placeholder=" "/>
<label for="candidateName">Candidate name</label>
</div>回答by Enrico
That site isn't moving the placeholder, but placing a div (.floating-label) over the input, so when the input is focused the div just animates to be over the input. The key part here is using pointer-events: none;in the floating div, so when you click it the event goes through it to the input box behind it.
该站点并没有移动占位符，而是.floating-label在输入上放置了一个 div ( )，因此当输入聚焦时，div 只是在输入上方进行动画处理。这里的关键部分是pointer-events: none;在浮动 div 中使用，因此当您单击它时，事件会通过它到达其后面的输入框。
回答by Alex
span{
display:block;
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() {
$('input').focus(function(){
placeholder = $(this).attr('placeholder');
if(placeholder != undefined){
$(this).parent().prepend('<span class="input-placeholder">'+placeholder+'</span>');
}
});
$('input').blur(function(){
$(this).parent().find('.input-placeholder').remove();
});
});
</script>
<div>
<input type="text" class="inputText" placeholder="Email adress" required/>
</div>