欢迎来到3672js教程,我们关注js教程、js框架、js代码特效等。

uniapp解决软键盘弹出问题方法详解,

3672Js.Com2023-07-21 00:25 来源:未知 阅读:6519 关注度5

uniapp解决软键盘弹出问题方法详解,


目录
  • 需求
    • (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软键盘弹出的资料请关注3672js教程其它相关文章!

    您可能感兴趣的文章:
    • uniapp中input聚焦禁止软键盘弹出方法
    • 封装一个vue中也可使用的uniapp的全局弹窗组件(任何页面都可以弹出)
    • uniapp组件uni-popup弹出层的使用
    • uniapp 仿微信的右边下拉选择弹出框的实现代码

    本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
    评论已被关闭
    {dede:include filename="foot.htm"/}