js动态创建input元素并自动获取焦点
input元素不会自动获取焦点代码如下:<div><h2>js创建input元素并自动聚焦</h2></div><script>let myButton = document.createElement('button');myButton.innerText = ' 点击我';document.body.append(myButton)
·
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: 如有不足,请指点,谢谢!
更多推荐
已为社区贡献1条内容
所有评论(0)