Question

我希望在输入未输入时隐藏我的标签，因为我有占位符文本，但一旦输入，我希望通过更改不透明度来显示它。

label {
  display: block;
  color:rgba(146,20,34,0);
  text-align: left;
  margin: 0;
  padding-left: 12.2%;
  font-size: 75%;
}

<label for="name">Full Name</label>
<input type="text" name="name" placeholder="Full Name" id="name" value="">
<br>
<label for="customerNum">Customer Number</label>
<input type="number" name="customerNum" placeholder="Customer Number" value="">

Answer 1

这是一个CSS唯一的答案，就像它可能感兴趣一样。

body{ padding:10px; }
input:placeholder-shown + label {
  border: 2px solid red; /* Red border only if the input is empty */
}

<input type="text" name="name" placeholder="Full Name" id="name" value="">
<label for="name">Full Name</label>
<br>
<input type="number" name="customerNum" placeholder="Customer Number" value="">
<label for="customerNum">Customer Number</label>

但是，存在一个问题，即它依赖于交换输入和标签的顺序。

Answer 2

您只需要在标签中添加一个类/属性，以确定它是否隐藏。然后，用JS检查输入是否已通过input事件输入。

＆＃13;

const inputs = document.querySelectorAll('input[type="text"]');

[].forEach.call(inputs, input => {
  const label = document.querySelector(`[for="${input.id}"]`);
  input.addEventListener('input', function () {
	if (this.value && this.value.length > 0) {
  	  label.removeAttribute('hidden');
    } else {
  	  label.setAttribute('hidden', '');
    }
  });
});

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background-color: #fff;
  padding: 50px 50px;
}
.group {
  display: inline-block;
  width: 200px;
}
.group label, .group input {
  display: block;
  font-family: 'open sans';
  transition: all .23s ease;
  width: 100%;
}
.group label {
  color: #555;
  font-size: 15px;
  font-weight: 600;
}
.group input {
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #555;
  font-size: 14px;
  height: 35px;
  margin-top: 5px;
  padding: 0 8px;
}
.group input:focus {
  border-color: #00bbff;
  box-shadow: 0 0 5px 1px rgba(0,188,255,.25);
  outline: none;
}
label[hidden] {
  opacity: 0;
  visibility: hidden;
}

＆＃13;

<div class="group">
  <label hidden for="name">Full name</label>
  <input type="text" id="name" placeholder="Enter your full name">
</div>
<div class="group" style="float: right">
  <label hidden for="address">Address</label>
  <input type="text" id="address" placeholder="Enter address">
</div>

＆＃13;

Answer 3

在HTML中添加<script>标记并使用以下javascript：

function setVisible(text) {
    var labels = document.getElementsByTagName("LABEL");
    for(var i = 0; i < labels.length; i++) {
         if(labels[i].innerHTML == text) {
             labels[i].style.color = "black";
         }
    }
}

为您的输入添加onchange属性：

onchange="setVisible(this.placeholder)"

最终结果应如下所示：

label {
  display: block;
  color:rgba(146,20,34,0);
  text-align: left;
  margin: 0;
  padding-left: 12.2%;
  font-size: 75%;
}

<label for="name">Full Name</label>
<input type="text" name="name" placeholder="Full Name" id="name" value="" onchange="setVisible(this.placeholder)">
<br>
<label for="customerNum">Customer Number</label>
<input type="number" name="customerNum" placeholder="Customer Number" value="" onchange="setVisible(this.placeholder)">

<script>
    function setVisible(text) {
    var labels = document.getElementsByTagName("LABEL");
        for(var i = 0; i < labels.length; i++) {
  	        if(labels[i].innerHTML == text) {
    	       labels[i].style.color = "black";
            }
        }
    }
</script>

输入文本时更改标签样式

3 个答案: