Как получить доступ к label при input:focus?

193

01 февраля 2019, 11:40

Каким образом получить доступ к label при фокусе в input?

.input-wrapper { 
  margin-top: 30px; 
} 
 
input, label { 
  display: block; 
} 
 
input { 
  border-top: none; 
  border-left: none; 
  border-right: none; 
  border-bottom: 2px solid blue; 
  height: 35px; 
  outline: 0; 
} 
 
label { 
  margin-bottom: -25px; 
}

<div class="input-wrapper"> 
  <label for="username">Username:</label> 
  <input type="textbox" id="username" /> 
</div> 
   
<div class="input-wrapper">  
  <label for="password">Password:</label> 
  <input type="textbox" id="password" /> 
</div>

NB: Не подходят варианты с перестановкой лейбла и инпута. Можем как угодно править css, но не html.

UPD: Пример механики которую хочу добиться см тут в разделе "Label text", картинка с подписью (что как бы намекает, но все-равно интересно же):

Don’t. Label text shouldn’t take up multiple lines.

Answer 1

Вариант без js (на чистом css), но с перестановкой элементов местами:

.input-wrapper { 
  margin-top: 10px; 
} 
 
input, label { 
  display: block; 
} 
 
input { 
  border-top: none; 
  border-left: none; 
  border-right: none; 
  border-bottom: 2px solid blue; 
  height: 35px; 
  outline: 0; 
  position: relative; 
  z-index: 1; 
  background: none; 
} 
 
label { 
  position: relative; 
  top: -30px; 
  transition: .5s; 
} 
 
#username:focus ~ label[for="username"], 
#username:valid ~ label[for="username"], 
#password:focus ~ label[for="password"], 
#password:valid ~ label[for="password"]{ 
  opacity: 0; 
}

<div class="input-wrapper"> 
  <input type="textbox" id="username" required /> 
  <label for="username">Username:</label> 
</div> 
   
<div class="input-wrapper">  
  <input type="textbox" id="password" required /> 
  <label for="password">Password:</label> 
</div>

Answer 2

Вариант без перестановки

function toggleInput(){ 
  if(this.value){ 
    $(this).parent('.input-wrapper').addClass('active'); 
  }else{ 
     $(this).parent('.input-wrapper').removeClass('active'); 
  } 
} 
$('.input-wrapper input').each(toggleInput); //на случай предустановленного значения 
$('.input-wrapper input').on('input',toggleInput);//при изменении

.input-wrapper { 
  margin-top: 30px; 
  position:relative; 
} 
 
input, label { 
  display: block; 
} 
 
input { 
  border-top: none; 
  border-left: none; 
  border-right: none; 
  border-bottom: 2px solid blue; 
  height: 35px; 
  outline: 0; 
} 
 
label { 
  position:absolute; 
  transition:all .2s ease; 
  bottom:.6em; 
  pointer-events:none; 
  white-space:nowrap;/*чтобы был всегда в одну строку*/ 
  max-width:100%; 
  overflow:hidden; 
  text-overflow:ellipsis; 
} 
.input-wrapper.active label{ 
  bottom:100%; 
  font-size:75%; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="input-wrapper"> 
  <label for="username">Username:</label> 
  <input type="text" id="username" value="Вахтанг" /> 
</div> 
   
<div class="input-wrapper">  
  <label for="password">Password:</label> 
  <input type="password" id="password" /> 
</div>

Вариант на css (с перестановкой): нужно задать input-ам placeholder из пробела и проверять наличие значения при помощи псевдокласса :placeholder-shown и :not. Такой способ не поддерживается в IE.

.input-wrapper { 
  margin-top: 30px; 
  position:relative; 
} 
 
input, label { 
  display: block; 
} 
 
input { 
  border-top: none; 
  border-left: none; 
  border-right: none; 
  border-bottom: 2px solid blue; 
  height: 35px; 
  outline: 0; 
} 
 
label { 
  position:absolute; 
  transition:all .2s ease; 
  bottom:.6em; 
  pointer-events:none; 
  white-space:nowrap;/*чтобы был всегда в одну строку*/ 
  max-width:100%; 
  overflow:hidden; 
  text-overflow:ellipsis; 
} 
.input-wrapper input:not(:placeholder-shown)+label, 
.input-wrapper input:focus+label{ 
  bottom:100%; 
  font-size:75%; 
}

<div class="input-wrapper">   
  <input type="text" id="username" value="Вахтанг" placeholder=" " /> 
  <label for="username">Username:</label> 
</div> 
   
<div class="input-wrapper"> 
  <input type="password" id="password" placeholder=" " /> 
  <label for="password">Password:</label>   
</div>