js使input聚焦
时间: 2023-10-23 20:08:53 浏览: 47
要使用JavaScript使输入框聚焦,可以使用`focus()`方法。在HTML中创建一个input元素后,可以使用`focus()`方法来自动将焦点设置到该元素上,无需手动点击输入框。举个例子,下面的代码片段会创建一个button元素,当点击该按钮时,会动态创建一个input元素,并自动将焦点设置到该输入框上:
```html
<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>
```
在这个例子中,当点击按钮时,会创建一个带有`placeholder`属性的input元素,并自动将焦点设置到该输入框上,让用户可以直接输入内容。
另外,还可以通过阻止`event:focus`事件的发生来实现自动获取焦点。举个例子,下面的代码片段也会实现相同的功能:
```html
<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();
};
</script>
```
在这个例子中,通过调用`event.preventDefault()`阻止了`focus`事件的发生,从而实现了自动获取焦点的效果。
所以,无论是使用`focus()`方法还是阻止`event:focus`事件的发生,都可以实现JavaScript使输入框聚焦的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [js动态创建input元素并自动获取焦点](https://blog.csdn.net/cobek/article/details/122914269)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [javascript聚焦input输入标签](https://blog.csdn.net/qq_37131111/article/details/78393016)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)