Установить фокус на ввод текста после завершения перехода - PullRequest
Новая
       8

Установить фокус на ввод текста после завершения перехода

0 голосов
/ 29 августа 2018

Есть ли способ установить фокус - чтобы ввод текста автоматически переходил в поле ввода текста - после завершения перехода? Я хочу, чтобы пользователь вводил ввод с клавиатуры, чтобы автоматически перейти в поле ввода текста. Если возможно, можно ли сделать это только с CSS? Или JavaScript (без jQuery!)? Что-то вроде 

document.getElementByClassName('text-input').focus();

не делает этого. 

<div class="wrapper">
  <div class="element"></div>
  <input class="text-input" type="text" name="search" />
</div>


.wrapper {
  height: 40px;
  width: 75px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  padding-left:30px;
  -webkit-transition: width 0.4s ease-in-out;
  box-sizing:border-box;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
  width: 100%;
}

.text-input {
  max-width: 0;
  float: left;
  padding: 0px;
  border: 0px transparent;
  -webkit-transition:max-width 0.6s ease-in-out;
  transition:max-width 0.6s ease-in-out;
}

.wrapper:hover .text-input {
  max-width: 50%;
  padding: 2px;
  border: 1px solid #d4d4d4;
}

Вот кодекс

https://codepen.io/anon/pen/MqjmQz

Ответы [ 3 ]

0 голосов
/ 29 августа 2018

Вот, пожалуйста. Чистое решение JS 

document.getElementById("wrapper").onmouseover = function()
{
setTimeout(function(){mouseOver()},600)
};


function mouseOver(){
document.getElementById('inputField').focus();
}
.wrapper {
  height: 40px;
  width: 75px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  padding-left:30px;
  -webkit-transition: width 0.4s ease-in-out;
  box-sizing:border-box;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
  width: 100%;
}

.text-input {
  max-width: 0;
  float: left;
  padding: 0px;
  border: 0px transparent;
  -webkit-transition:max-width 0.6s ease-in-out;
  transition:max-width 0.6s ease-in-out;
}

.wrapper:hover .text-input {
  max-width: 50%;
  padding: 2px;
  border: 1px solid #d4d4d4;
}
<div class="wrapper" id="wrapper">
  <div class="element"></div>
  <input class="text-input" id="inputField" type="text" name="search" />
</div>

Редактировать
Вы также можете вызвать функцию mouseout, чтобы всякий раз, когда курсор исчезал, поле становилось размытым. 

document.getElementById("wrapper").onmouseover = function()
{
setTimeout(function(){mouseOver()},600)
};
document.getElementById("wrapper").onmouseleave = function()
{
mouseOut()
};


function mouseOver(){
document.getElementById('inputField').focus();
}
function mouseOut(){
document.getElementById('inputField').blur();
}
.wrapper {
  height: 40px;
  width: 75px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  padding-left:30px;
  -webkit-transition: width 0.4s ease-in-out;
  box-sizing:border-box;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
  width: 100%;
}

.text-input {
  max-width: 0;
  float: left;
  padding: 0px;
  border: 0px transparent;
  -webkit-transition:max-width 0.6s ease-in-out;
  transition:max-width 0.6s ease-in-out;
}

.wrapper:hover .text-input {
  max-width: 50%;
  padding: 2px;
  border: 1px solid #d4d4d4;
}
<div class="wrapper" id="wrapper">
  <div class="element"></div>
  <input class="text-input" id="inputField" type="text" name="search" />
</div>
0 голосов
/ 29 августа 2018

Я вижу другие решения, лучше использовать transitionend обработчик событий. Просто добавив еще один способ сделать это. Пожалуйста, посмотрите.

JS: 

var txtInput = document.querySelector('.text-input');

txtInput.addEventListener("transitionend", function(e){
  document.getElementById('inputField').focus();
}, false)

https://codepen.io/anon/pen/MqjmQz

0 голосов
/ 29 августа 2018

Боюсь, что такой функции нет, но, поскольку вы знаете, сколько времени займет переход (0,6 с), вы можете использовать setTimeout. 

var wrapper = document.querySelector('.wrapper');
wrapper.addEventListener('mouseover', function() {
  setTimeout(function() {
    wrapper.classList.add('focus');
    document.querySelector('.text-input').focus();
  }, 600)
});

Затем вам нужно внести некоторые изменения в CSS, чтобы предотвратить сжатие, когда мышь гаснет. 

.wrapper {
  height: 40px;
  width: 75px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  padding-left:30px;
  -webkit-transition: width 0.4s ease-in-out;
  box-sizing:border-box;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover,
.wrapper.focus {
  width: 100%;
}

.text-input {
  max-width: 0;
  float: left;
  padding: 0px;
  border: 0px transparent;
  -webkit-transition:max-width 0.6s ease-in-out;
  transition:max-width 0.6s ease-in-out;
}

.wrapper:hover .text-input,
.wrapper.focus .text-input{
  max-width: 50%;
  padding: 2px;
  border: 1px solid #d4d4d4;
}

https://codepen.io/lucafbb/pen/Eegmrx?editors=1111

...