表格输入标签保持变换位置

Question

我的问题很简单，我尝试在用户输入任何文字而不只是label文字/电子邮件后，将电子邮件input字段的:valid保留在其转换后的位置。< / p>

因此，在代码段中，您可以看到用户是否在有效电子邮件中输入内容，即使您在输入字段外单击，标签也会保留其转换后的位置。

这是检查有效输入并保持转换的css，并按预期工作

.contact-form .input-text:valid + .label {
  font-size: 14px;
  font-weight: 600;
  bottom: 20px;
  -webkit-transform: translateY(-24px);
  transform: translateY(-24px);
}

问题 - 现在尝试在输入字段中输入随机文本，然后在输入字段外单击，您将看到标签返回其原始位置。

问题 - 如何根据输入字段中输入的任何文本将label保留在其转换后的位置，并在点击外部时保持label位置输入字段。

希望这会奏效：

.contact-form div.email input[type=email] + .label {
  font-size: 14px;
  font-weight: 600;
  bottom: 20px;
  -webkit-transform: translateY(-24px);
  transform: translateY(-24px);
}

我的代码

＆＃13;

＆＃13;

div.row {
  padding: 50px;
}

.contact-form .label {
    position: absolute;
    left: 0;
    bottom: 12px;
    font-size: 30px;
    line-height: 26px;
    font-weight: 600;
    color: #ccc;
    cursor: text;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

.contact-form .input-text {
    display: block;
    width: 100%;
    height: 30px;
    padding: 30px 0px;
    border-width: 0 0 1px 0;
    border-color: #ccc;
    font-size: 36px;
    line-height: 26px;
    font-weight: 400;
}

.contact-form .form-field {
    position: relative;
    margin: 16px 0;
    width: 95%;
}

.contact-form .input-text:focus {
    outline: none;
}

.contact-form .input-text:focus + .label {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    font-size: 14px;
    font-weight: 600;
    bottom: 20px;
}

.contact-form .input-text:valid + .label {
    font-size: 14px;
    font-weight: 600;
    bottom: 20px;
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row extra">
<div class="col-md-6">  
<form class="contact-form row extra">

  <div class="form-field email">
      <input id="email" class="input-text js-input" type="email" required>
  <label class="label" for="email">Your Email</label>
  </div>
  
  <div class="form-field colalign-center submit-form">
      <input class="submit-btn btn btn-custom pull-right" type="submit" value="Send">
  </div>
  
</form>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我通过将占位符添加到输入并通过不透明度隐藏它来解决它，当有些人通过检查占位符是否未显示输入输入中的文本时我保持标签的相同位置

＆＃13;

＆＃13;

::-webkit-input-placeholder {
   color: #666;
   opacity: 0;
}

:-moz-placeholder { /* Firefox 18- */
   color: #666;
   opacity: 0;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #666;
   opacity: 0;
}

:-ms-input-placeholder {
   color: #666;
   opacity: 0;
}

div.row {
  padding: 50px;
}

.contact-form .label {
    position: absolute;
    left: 0;
    bottom: 12px;
    font-size: 30px;
    line-height: 26px;
    font-weight: 600;
    color: #ccc;
    cursor: text;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

.contact-form .input-text {
    display: block;
    width: 100%;
    height: 30px;
    padding: 30px 0px;
    border-width: 0 0 1px 0;
    border-color: #ccc;
    font-size: 36px;
    line-height: 26px;
    font-weight: 400;
}

.contact-form .form-field {
    position: relative;
    margin: 16px 0;
    width: 95%;
}

.contact-form .input-text:focus {
    outline: none;
}

.contact-form .input-text:focus + .label {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    font-size: 14px;
    font-weight: 600;
    bottom: 20px;
}

.contact-form .input-text:not(:placeholder-shown) + label{
  -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    font-size: 14px;
    font-weight: 600;
    bottom: 20px;
}

.contact-form .input-text:valid + .label {
    font-size: 14px;
    font-weight: 600;
    bottom: 20px;
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row extra">
<div class="col-md-6">  
<form class="contact-form row extra">

  <div class="form-field email">
      <input id="email" class="input-text js-input" type="email" placeholder="email" required>
  <label class="label" for="email">Your Email</label>
  </div>
  
  <div class="form-field colalign-center submit-form">
      <input class="submit-btn btn btn-custom pull-right" type="submit" value="Send">
  </div>
  
</form>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;