主页 / 问题 / 935539
Accepted
Alisa Bondarchuk
Asked:2020-01-23 15:15:19 +0000 UTC2020-01-23 15:15:19 +0000 UTC

如何使田地不相互倒塌？

  • 772

我有一个文本输入字段。此字段中有一个标签。当我单击文本输入字段时，标签会上升并输入我的文本，但在我输入后（即当我用鼠标单击屏幕上的某个位置时），标签会下降到它的位置并因此落在输入的文本。帮助确保在填写该字段时，标签保留在原位。

PS 没有 JS 代码，但如果有必要，那我们就用纯 JS。

input {
  margin: 50px;
  width: 17%;
}
label {
  margin: 50px;
  position: absolute;
  left: 5px;
}
input:focus ~ label, input.used ~ label {
  top: -20px;
}
<!DOCTYPE html>
<html><head>
  <link href="./text.css" rel="stylesheet"></head>
<body>
  <input type="text" id="text"><span class="highlight"></span><span
    class="bar"></span>
  <label for="text">TEXT</label>
</body></html>

javascript

2 个回答

  1. Best Answer

    1.如果只是通过css。

    在 css 中设置input属性和条件：requiredinput:focus ~ label, input:valid ~ label { ... }

    * {
  box-sizing:border-box;
}

.form-group {
  position: relative;
  width: 50%;
  padding: 50px;
}

input {
  width: 100%;
  height: 30px;
}

label {
  position: absolute;
  left: 55px;
  top: 55px;
  
  transition:all .2s ease-in-out;
}

input:focus ~ label, input:valid ~ label {
  top: 20px;
  color:green;
}
    <form>
  <div class="form-group">
    <input type="text" id="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label for="text">TEXT</label>
  </div>
</form>

    2. 使用 jquery 的选项（如果其他人需要它）：

    $('input').on('focusin', function() {
  var 
  $this = $(this),
      row = $this.closest('.form-group'),
      label = row.find('label');

  row.addClass('active');
});

$('input').on('focusout', function() {
  var 
  $this = $(this),
      row = $this.closest('.form-group'),
      label = row.find('label'),
      val = this.value;


  if (!val) {
    row.removeClass('active');
  }
});
    * {
  box-sizing:border-box;
}

.form-group {
  position: relative;
  width: 50%;
  padding: 50px;
}

input {
  width: 100%;
  height: 30px;
}

label {
  position: absolute;
  left: 55px;
  top: 55px;
  
  transition:all .2s ease-in-out;
}

.active label {
  top: 20px;
  color:green;
}
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
<form>
  <div class="form-group">
    <input type="text" id="text">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label for="text">TEXT</label>
  </div>
</form>

    • 5 

  2. input.addEventListener("input", function() {
  this.parentNode.dataset.top = this.value ? 1 : 0
})
    label {
  margin-top: 50px;
  display: inline-block;
  position: relative;
  padding: 5px;
  border: 1px solid black;
  cursor: text;
  font-size: 14px;
}

label[placeholder]::before {
  content: attr(placeholder);
  position: absolute;
  opacity: .5;
}

label[data-top="1"]::before {
  top: -2px;
  left: 2px;
  transform: translateY(-100%)
}

label[placeholder] input {
  border: none;
  font: inherit;
  outline: none;
  padding: 0px;
}
    <label placeholder="Write me...">
  <input type="text" id="input">
</label>

    • 3

相关问题