如何在打字时将占位符移动到焦点和顶部？答案

【问题标题】：How to move placeholder to top on focus AND while typing?如何在打字时将占位符移动到焦点和顶部？
【发布时间】：2021-05-16 18:02:19
【问题描述】：

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

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

我现在的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;
}

它几乎可以完成工作，但是当我开始输入时占位符消失了。我正在使用 twitter-bootstrap，如果这样更容易的话！

谢谢。

【问题讨论】：

如果您只检查该页面，您会发现他们正在操作的不是占位符，而是浮动在 INPUT 顶部的 DIV。您应该能够通过查看该站点上的代码来复制正在发生的事情。
看不到任何占位符代码，我太着迷了，以至于我不知道他们正在使用另一个 div。所以没有办法让占位符在打字时保持不变？
Google 的 Material Design Lite 使用了类似的行为。 Here 是如何使用 HTML/CSS/jQuery 实现此类功能的示例。我认为您通常需要 JS 才能使其正常工作。
链接页面没有使用JS。这不是必需的。您可以使用 pointer-events 属性和 :focus 选择器来解决它，只需要 CSS。
@BivoKasaju 提供的链接不再起作用，考虑更改它或修改问题

标签： html twitter-bootstrap css

【解决方案1】：

你可以这样做

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

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

【讨论】：

由于某种原因，我的浮动标签出现在文本框下方。也许引导程序弄乱了我的代码。
您可以根据您的 dom 设置更改 .floating-label 中的 top:18px。这样浮动标签就位于输入中。
@BivoKasaju 您可以通过添加 input:not(:focus):valid ~ .floating-label 来使用 css。请参阅我更新的答案和 JSFiddle。
:not(:focus) 将检查输入元素是否没有聚焦，:valid 将检查输入值是否有效。注意：当您将 required 添加到您的 html 输入标签时，:valid 有效。
也许我迟到了，但上述解决方案有效，除非输入包含type="email"。当您在此字段之外使用 tab 时，浮动标签将再次增长到原来的大小。有人对此有解决方法/解决方案吗？

【解决方案2】：

.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>

稍微修改了@user1846747的代码。

【讨论】：

如果不使用required，我们需要在input元素中添加一点js，对css进行少量更改。请检查此jsfiddle.net/v14whx2b
知道如果设置了pattern 属性会中断吗？

【解决方案3】：

仅使用 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>

【讨论】：

【解决方案4】：

你可以试试下面的代码。它只使用 HTML 和 CSS，不回复 Javascript 或组件库：

.text-field {
        position: relative;
        margin: 10px 2.5px 20px 2.5px;
    }

input {
        display: inline-block;
        border: thin solid #fafafa;
        border-bottom: solid medium #999;
        color: #444;
        background-color: #fafafa;
        padding: 10px 10px 10px 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    input:focus {
            border: thin solid #32cd32;
            border-bottom: solid medium #32cd32;
            background-color:#fff;
        }

label {
        color: #999;
        position: absolute;
        pointer-events: none;
        left: 10px;
        top: 10px;
        transition: 0.2s;
    }

input:focus ~ label, input:valid ~ label {
        top: -10px;
        left: 15px;
        font-size: small;
        color: #32cd32;
        background-color:#fff;
        padding:0 5px 0 5px;
    }

<div class="text-field">
                <input type="text" required>
                <label>Input field 1</label>
            </div>

            <div class="text-field">
                <input type="text" required>
                <label>Input field 2</label>
            </div>

【讨论】：

知道为什么当输入元素设置了pattern 属性时这段代码会中断吗？
这段代码确实不需要JS，但你需要添加所需的attr ....

【解决方案5】：

该站点没有移动占位符，而是在输入上放置了一个 div (.floating-label)，因此当输入聚焦时，div 只是在输入上设置动画。这里的关键部分是在浮动div中使用pointer-events: none;，所以当你点击它时，事件会通过它到达它后面的输入框。

【讨论】：

【解决方案6】：

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>

【讨论】：

【解决方案7】：

如果您的浮动标签在移除所需属性后不起作用，请尝试以下操作：使用 input:not(:placeholder-shown)

input:focus ~ .floating-label,
input:not(:placeholder-shown) ~ .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;
}

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

【讨论】：

【解决方案8】：

我想提出的解决方案是处理占位符移动的输入不需要必需的属性

.inputField {
  position: relative;
}

.inputField input {
  padding: 8px 20px;
  padding-top: 18px;
  border: 1.8px solid rgba(107, 107, 107, 0.4);
  border-radius: 3px;
  width: 50%;
  color: black;
}

.inputField input:focus {
  border: 1.8px solid #6b6b6b;
  outline: none;
}

.inputField span {
  pointer-events: none;
  opacity: 0.5;
  position: absolute;
  padding-left: 20px;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: text;
}

.inputField input:focus+span,
.inputField input:not(:placeholder-shown)+span {
  top: 7px;
  -webkit-transform: scale(0.7) translateY(-10%) translateX(-8.5px);
  transform: scale(0.7) translateY(-10%) translateX(-8.5px);
}

.inputField input,
.inputField span {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

<div class="inputField">
  <input type="text" placeholder=" " />
  <span>Placeholder</span>
</div>

【讨论】：

这很好，但是您是否注意到，如果您单击 Placeholder 它不会打开输入？这不是必需的，但是您知道一种方法可以使其也能正常工作吗？
感谢您向我报告此问题。我通过向标签添加一个 css 属性解决了这个问题：pointer-events: none;