input元素不会自动获取焦点代码如下:
<div><h2>js创建input元素并自动聚焦</h2></div><script>let myButton = document.createElement('button');myButton.innerText = ' 点击我';document.body.append(myButton);myButton.onmousedown = () => {let myInput = document.createElement('input');myInput.placeholder = '手机号';document.body.appendChild(myInput);myInput.focus();};</script>
点击按钮后,生成的input框并不会获取焦点,如图:
解决方案
1、使用setTimeout,代码如下
<div><h2>js创建input元素并自动聚焦</h2></div><script>let myButton = document.createElement('button');myButton.innerText = ' 点击我';document.body.append(myButton);myButton.onmousedown = () => {let myInput = document.createElement('input');myInput.placeholder = '手机号';document.body.appendChild(myInput);setTimeout(() => {myInput.focus();}, 0);};</script>
2、把onmousedown改成onclick,代码如下:
<div><h2>js创建input元素并自动聚焦</h2></div><script>let myButton = document.createElement('button');myButton.innerText = ' 点击我';document.body.append(myButton);myButton.onclick = () => {let myInput = document.createElement('input');myInput.placeholder = '手机号';document.body.appendChild(myInput);myInput.focus();};
当使用onmousedown时,默认触发的Event:foucs事件是发生在完成onmousedown回调函数之后,故input框无法获取焦点
当使用onclick时,默认触发的Event:foucs事件是发生在完成onclick回调函数之前,故input框可以获取焦点
过程如下图:
onmousedown过程图
onclick过程图
验证触发默认事件代码如下:
<div><h2>js创建input元素并自动聚焦</h2></div><script>let myButton = document.createElement('button');myButton.innerText = ' 点击我';document.body.append(myButton);// 默认触发该事件myButton.onfocus = () => {console.log('触发了onfocus事件');};myButton.onmousedown = () => {let myInput = document.createElement('input');myInput.placeholder = '手机号';document.body.appendChild(myInput);myInput.focus();};
打印的log如图:
3、阻止默认事件发生,代码如下:
只需要阻止Event:foucs事件的发生,就可以自动获取焦点。
<div><h2>js创建input元素并自动聚焦</h2></div><script>let myButton = document.createElement('button');myButton.innerText = ' 点击我';document.body.append(myButton);myButton.onmousedown = event => {event.preventDefault();let myInput = document.createElement('input');myInput.placeholder = '手机号';document.body.appendChild(myInput);myInput.focus();};
使用上述任意一种解决方案,点击按钮后都可以获取焦点,效果图如下:
ps: 如有不足,请指点,谢谢!