js动态创建input元素并自动获取焦点

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： 如有不足，请指点，谢谢！