uniapp设置textarea输入时页面不自动滚动至光标处
时间: 2024-10-01 18:04:01 浏览: 51
在uniApp中,如果你想要在textarea输入框聚焦时页面能自动滚动到光标位置,你可以通过监听`input`事件并手动控制滚动条来实现。首先,在textarea元素上绑定`input`事件:
```html
<view class="content">
<textarea v-model="text" @input="scrollToCursor"></textarea>
</view>
```
然后在你的Vue组件的script部分添加相应的处理函数:
```javascript
export default {
data() {
return {
text: '',
};
},
methods: {
scrollToCursor(e) {
// 获取textarea元素及光标位置
const textarea = this.$refs.textarea;
const cursorRect = textarea.getBoundingClientRect();
const cursorTop = cursorRect.top + window.pageYOffset; // 光标距离视口顶部的像素
// 滚动页面到光标位置
if (cursorTop > document.documentElement.scrollTop) {
window.scrollTo({
top: cursorTop,
behavior: 'smooth', // 使用平滑滚动效果
});
}
},
},
};
```
这里的关键是`getBoundingClientRect()`方法获取到光标的矩形区域,然后计算出光标距离视口顶部的位置。如果这个位置高于当前滚动位置,就使用`window.scrollTo()`方法滚动到那个位置。
阅读全文