javascript - 过渡结束后将焦点设置为textinput

有没有一种方法可以设置焦点-在过渡结束后自动将键入文本输入到文本输入字段中？然后，我希望用户键入键盘输入以自动进入textinput字段。如果可能的话，只能使用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;
}

这是一个codepen

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

最佳答案

干得好。纯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>