uniapp如何有效解决软键盘弹出导致页面布局错乱的问题？

本文共计610个文字，预计阅读时间需要3分钟。

目录 + 需求 + (1) 尝试1 + (2) 尝试2 + 备注+ 展开 + 需求 + 当输入框聚焦时禁止系统软键盘弹出 + (1) 尝试1 + 在输入框聚焦时隐藏软键盘 + focus: function() { console.log(输入框聚焦); // 并不能完全禁止使用 }

目录

• 需求
• (1) 尝试1
• (2) 尝试2
• 备注
• 拓展

需求

当input输入框输入聚焦时禁止系统软键盘弹出

(1) 尝试1

在输入框聚焦时隐藏软键盘

focus:function(){ console.log("输入框聚焦"); // 并不能完全禁用软键盘 setTimeout(function(){ uni.hideKeyboard();//隐藏软键盘 // plus.key.hideSoftKeybord(); },250); },

实际效果：

• 界面会有一个键盘先弹出后隐藏的切换过程，用户体验不好

(2) 尝试2

在界面显示时每隔固定时间执行一次隐藏操作

onShow:function(){ console.log( "home-监听页面显示"); //执行频率：game（20ms/次）、ui（60ms/次）、normal（200ms/次） setInterval(function(){ uni.hideKeyboard();//隐藏软键盘 // plus.key.hideSoftKeybord(); },60); },

备注

若需在整个应用中都禁用系统软键盘，则在app.vue文件的onShow()方法中执行以上代码即可 ；若仅需在单个特殊页面禁用，其他界面还需系统软键盘进行输入，那么仅在这个特殊界面的onShow()方法中执行以上代码即可。

实际效果：完美解决软键盘弹出问题

拓展

回调函数的执行频率：game（20ms/次）、ui（60ms/次）、normal（200ms/次）

值说明game适用于更新游戏的回调频率，在 20ms/次 左右ui适用于更新 UI 的回调频率，在 60ms/次 左右normal普通的回调频率，在 200ms/次 左右

• 新问题：若单个界面（如page1）禁用软键盘，而page2需要使用输入法进行输入时，若先进入的是page2则输入法可弹出，但若进入过page1再进入page2，那么在page2输入时不会弹出软件盘。
• 优化思路：在界面销毁时清除定时器，参考uni-app 中清除定时器。

以上就是uniapp解决软键盘弹出问题方法详解的详细内容，更多关于uniapp软键盘弹出的资料请关注自由互联其它相关文章！