输入有文本时的占位符位置答案

【问题标题】：Placeholder position when input has text输入有文本时的占位符位置
【发布时间】：2017-05-11 18:02:24
【问题描述】：

如何在输入文本为焦点时进行占位符样式，占位符仍然可见并且字体大小变小。比如这样：

我只需要 webkit 支持。 webkit 支持吗？

【问题讨论】：

这需要是一个自定义元素。这个术语是“浮动标签”，我相信您可以在网上找到更多信息，如果您在实施某种技术时遇到问题，请提出另一个问题。

【解决方案1】：

.input {
  width: 200px;
  height: 35px;
  outline:0;
  padding:0 10px;
}
.label { position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}
input:focus ~ .label,
input:not(:focus):valid ~ .label{
  top: 10px;
  bottom: 5px;
  left: 20px;
  font-size: 12px;
}

<div>
  <input type="text" class="input" required/>
  <span class="label">Company Name</span>
</div>

【讨论】：

【解决方案2】：

您需要使用label 元素并相应地对其进行修改。试试这个：

function fillClass() {
  if ($(this).val() != '')
    $(this).parent().addClass('input--filled');
  else
    $(this).parent().removeClass('input--filled');
}


$(".sign-in-input").focusout(fillClass);

.sign-in-input-ctr {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 25px;
  position: relative;
  margin-top: 50px;
}
.sign-in-input {
  width: 100%;
  border: 2px solid transparent;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  height: 38px;
  background-color: #fff;
  outline: none;
  border: 1px solid rgba(73, 73, 73, 0.2);
  border-radius: 2px;
  padding-left: 10px;
}
.sign-in-input:focus,
.input--filled .sign-in-input {
  background-color: transparent;
  border: 1px solid #a09e9e;
}
.sign-in-label {
  width: 100%;
  font-size: 12px;
  position: absolute;
  top: -18px;
  pointer-events: none;
  overflow: hidden;
  padding: 0 15px;
  left: 0;
  -webkit-transform: translate3d(0, 30px, 0);
  transform: translate3d(0, 30px, 0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.sign-in-input:focus+.sign-in-label,
.input--filled .sign-in-label {
  -webkit-transform: translate3d(-15px, 0, 0);
  transform: translate3d(-15px, 0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-in-input-ctr">
  <input class="sign-in-input" type="text" name="email">
  <label class="sign-in-label" for="signin-email"><span class="input-label-content">Email</span>
  </label>
</div>

【讨论】：

【解决方案3】：

//------ contact us dropdown list
$(document).ready(function(){
$( ".form-group .form-control" ).focus(function() {
  $(this).parent().addClass('inputFous');
}).blur(function() {
    if($.trim($(this).val()) == '')
    {
        $(this).parent().removeClass('inputFous');  
    }       
});
});

我认为没有对此的 webkit 支持，请检查此代码对您有帮助：- Jsfiddle

【讨论】：