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: 如有不足,请指点,谢谢!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐