uniapp微信小程序input自动获取焦点
时间: 2024-12-17 10:56:10 浏览: 87
在UniApp开发微信小程序时,如果你想让`<input>`元素在页面加载或某个事件触发时自动获取焦点,你可以这样做:
1. 在`<view>`或其他容器元素上绑定`bindload`或`ready`事件,当页面完成加载后调用聚焦方法:
```html
<view bindload="focusInput">
<input type="text" id="myInput" />
</view>
<script>
Page({
focusInput() {
const input = this.selectComponent('#myInput');
if (input) {
input.focus();
}
},
})
</script>
```
2. 或者,如果你希望在特定事件如用户点击按钮后聚焦输入框,可以在对应的事件处理函数里添加聚焦操作:
```html
<button bindtap="focusInput">点击聚焦输入框</button>
<input type="text" id="myInput" />
<script>
Page({
focusInput() {
const input = this.selectComponent('#myInput');
if (input) {
input.focus();
}
},
})
</script>
```
在这个例子中,当用户点击按钮时,`focusInput`函数会被调用,`input`元素会获得焦点。
阅读全文
相关推荐












