H5,input,textarea输入时,软键盘弹起不能自动收回(ios,安卓正常)
下方图片中的按钮下面大片空白就是手机软键盘没有折回出现的,如果在软键盘没有恢复就点击按钮进行操作,页面按钮失效,页面卡顿不能操作了,所以影响还是很大的,查询过原因是因为微信改版出现了这种现象。
解决方式参考:
//键盘收起以后页面缩回
$(".form input").on("blur",function(){
var toFix=$(this).offset().top;
window.scroll(0,toFix);//失焦后强制让页面归位
});
<textarea class="textarea" @blur.prevent="inputLoseFocus" placeholder="xxx" v-model.trim="rejectReason"></textarea>
// 解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题
inputLoseFocus() {
setTimeout(() => {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
}
window.scrollTo()滚动动画
先构造scrollAnimation方法
动画垂直滚动到页面指定位置
$param currentY 当前位置
$param targetY 目标位置
function scrollAnimation(currentY, targetY) {
// 获取当前位置方法
// const currentY = document.documentElement.scrollTop || document.body.scrollTop
// 计算需要移动的距离
let needScrollTop = targetY - currentY
let _currentY = currentY
setTimeout(() => {
// 一次调用滑动帧数,每次调用会不一样
const dist = Math.ceil(needScrollTop / 10)
_currentY += dist
window.scrollTo(_currentY, currentY)
// 如果移动幅度小于十个像素,直接移动,否则递归调用,实现动画效果
if (needScrollTop > 10 || needScrollTop < -10) {
scrollAnimation(_currentY, targetY)
} else {
window.scrollTo(_currentY, targetY)
}
}, 1)
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理