Изменение стиля ярлыка, когда ввод имеет текст

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

Вам только нужно добавить класс/атрибут к ярлыку для того, чтобы определить, если он скрыт или нет. Затем, если JS проверяет, введен ли вход через событие input.

const inputs = document.querySelectorAll('input[type="text"]'); 
 

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

*, 
 
*: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; 
 
}

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

Answer 2

Добавить <script> тег внутри HTML и использовать следующие 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)" 

Конечный результат s hould выглядеть следующим образом:

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++) { 
 
    \t   if(labels[i].innerHTML == text) { 
 
    \t  labels[i].style.color = "black"; 
 
      } 
 
     } 
 
    } 
 
</script>

Answer 3

Вот 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>

Однако существует проблема, что она опирается на обмен порядок ввода и этикетки.