Javascript 转换结束后，将焦点设置为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;
}

这是一支密码笔

---

我担心没有这样的功能，但正如您所知，转换需要0.6秒的时间，您可以使用setTimeout

var wrapper=document.querySelector'.wrapper'； addEventListener'mouseover'，函数{ setTimeoutfunction{ wrapper.classList.add'focus'； document.querySelector'.text input'.focus； }, 600 }; 然后，您需要一些CSS更改，以防止鼠标熄灭时收缩

.包装纸{ 高度：40px； 宽度：75px； 边框样式：实心； 边框宽度：2倍； 边界半径：40px； 边框颜色：红色； 显示器：flex； 对齐项目：居中； 左侧填充：30px； -webkit过渡：宽度为0.4s，易于进出； 框大小：边框框； } .元素{ 背景色：热粉红色； 宽度：10px； 高度：10px； } .包装器：悬停， .聚焦{ 宽度：100%； } .文本输入{ 最大宽度：0； 浮动：左； 填充：0px； 边框：0px透明； -webkit过渡：最大宽度为0.6s，易于进出； 过渡：最大宽度0.6s缓进缓出； } .wrapper:hover.text输入， .wrapper.focus.text输入{ 最大宽度：50%； 填充：2px； 边框：1px实心D4； }

---

给你。纯JS解决方案 document.getElementByIdwrapper.onmouseover=函数 { setTimeoutfunction{mouseOver}，600 }; 功能鼠标盖{ getElementById'inputField'。焦点； } .包装纸{ 高度：40px； 宽度：75px； 边框样式：实心； 边框宽度：2倍； 边界半径：40px； 边框颜色：红色； 显示器：flex； 对齐项目：居中； 左侧填充：30px； -webkit过渡：宽度为0.4s，易于进出； 框大小：边框框； } .元素{ 背景色：热粉红色； 宽度：10px； 高度：10px； } .包装器：悬停{ 宽度：100%； } .文本输入{ 最大宽度：0； 浮动：左； 填充：0px； 边框：0px透明； -webkit过渡：最大宽度为0.6s，易于进出； 过渡：最大宽度0.6s缓进缓出； } .wrapper:hover.text输入{ 最大宽度：50%； 填充：2px； 边框：1px实心D4； }

---

我看到了其他解决方案，最好使用transitionend事件侦听器。只需再增加一种方法即可。请看一看

JS:

---

我认为不可能使用纯CSS关注元素。您是否无法使用HTML DOM focus方法？@Lesleyvdp，该方法不起作用。焦点没有设定。我想这是因为过渡？为了便于将来参考，你根本不必担心过渡。如果在输入后设置焦点，它会工作@Stophface也检查我编辑的答案：那不行。当我开始输入时，页面会重新加载，输入的内容会出现在带边框的div上。你应该在答案中输入代码。如果需要，包括一个演示链接，但是一个只有链接的答案根本不是答案。这确实有效，但我不能+1它，因为它会误导。唯一的问题是没有设定焦点。它与转换无关，因此所有与转换相关的代码都是多余的，只会导致不必要的代码膨胀。阅读标题：它说：“转换结束后将焦点设置为textinput”。转换结束后的部分不能没有这个。是的，它可以-有转换结束事件。但除此之外，很明显，OP只认为他们需要在过渡后确定重点。他们只是希望输入具有焦点。这一答案具有极大的误导性，因为OP现在认为情况确实如此，并会继续思考这一点，并不断膨胀他们所从事的每一个项目，直到有人纠正它们。但如果你选择WebKittTransitionEnd或transitionend，最终会产生浏览器兼容性问题。虽然onmouseover和onmouseleave受到广泛支持，但我相信它们之间存在着->转换和WebKitt转换或转换和MSTransitionEnd转换，所有最新的平台都涵盖了所有内容。如果平台不是最新的，那么简单的element.focus是唯一简单的答案。使用setTimeout是一种技巧，它没有考虑到转换时间可能会改变的事实。但是，它仍然可以工作，因为setTimeout根本没有必要。我只是想让你明白这一点，因为我已经在作品中举例说明了这一点。太好了！我不知道转换的事件

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

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