BoredApe
BoredApe
  • 发布:2016-01-14 18:10
  • 更新:2020-07-24 15:13
  • 阅读:50241

使用Native.js实现打开页面默认弹出软键盘

分类:Native.js

先来体验下这个神奇的功能(兼容iOS和Android):


此功能需要在模块权限中配置Native.js

var nativeWebview, imm, InputMethodManager;  
var initNativeObjects = function() {  
    if (mui.os.android) {  
        var main = plus.android.runtimeMainActivity();  
        var Context = plus.android.importClass("android.content.Context");  
        InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");  
        imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);  
    } else {  
        nativeWebview = plus.webview.currentWebview().nativeInstanceObject();  
    }  
};  
var showSoftInput = function() {  
    if (mui.os.android) {  
        imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);  
    } else {  
        nativeWebview.plusCallMethod({  
            "setKeyboardDisplayRequiresUserAction": false  
        });  
    }  
    setTimeout(function() {  
       //此处可写具体逻辑设置获取焦点的input  
       var inputElem = document.querySelector('input');  
              inputElem.focus();   
    }, 200);  
};  
mui.plusReady(function() {  
    initNativeObjects();  
    showSoftInput();  
});

补充更新:

调用plus.webview.create()创建新的webview,会导致当前webview失去焦点,因此可能出现键盘闪一下又消失的情况。

解决方案:将创建webview的代码放到显示键盘之前(initNativeObjects方法之前)。

另外,为了强制当前webview获得焦点,可像如下方式修改showSoftInput方法:

var showSoftInput = function() {  
    var nativeWebview = plus.webview.currentWebview().nativeInstanceObject();  
    if (mui.os.android) {  
        //强制当前webview获得焦点  
        plus.android.importClass(nativeWebview);  
        nativeWebview.requestFocus();  
        imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);  
    } else {  
        nativeWebview.plusCallMethod({  
            "setKeyboardDisplayRequiresUserAction": false  
        });  
    }  
    setTimeout(function() {  
       //此处可写具体逻辑设置获取焦点的input  
       var inputElem = document.querySelector('input');  
              inputElem.focus();   
    }, 200);  
};
20 关注 分享
蔡繁荣 k_liu yank90 safaring 小岳岳 MooGu 陌上花 Trust 6***@qq.com 仙人指路 大毕 9***@qq.com 赵 田云 8***@qq.com 最光阴 miskss Yizhiyu ___K 2***@qq.com

要回复文章请先登录注册

c***@shijigroup.com

c***@shijigroup.com

首次打开有有1~2秒的延时怎么解决
2020-07-24 15:13
万能的李大少

万能的李大少

回复 2***@qq.com :
我为什么是UIwebview下ios不行
2019-10-31 18:10
万能的李大少

万能的李大少

ios无效啊,运行环境ios13,HbuliderX,现在hbuliderX运行自动使用WKWebview,这时弹出方法是有效的,但是我需要使用UIWebview,切回这个内核ios弹起键盘就失效了,大佬们这该如何是好
2019-10-31 09:22
4***@qq.com

4***@qq.com

楼主你好,我想在页面里增加一个设置,可以让用户自己打开关闭软键盘,我们是在手持安卓设备上开发,设备自带硬键盘,那么经常输入弹出软键盘会很烦,因为手持设备的屏幕就那么大,很碍眼……麻烦解答下谢谢了
2019-04-24 18:25
4***@qq.com

4***@qq.com

现在是不是输入框自带弹出软键盘的功能?我尝试不加上述代码也会弹出。
2018-09-29 14:58
9***@qq.com

9***@qq.com

回复 Reinhardt :
是的,已经放弃这个功能了
2018-09-17 14:46
Reinhardt

Reinhardt

回复 9***@qq.com :
iOS13.1?
2018-08-20 16:29
9***@qq.com

9***@qq.com

回复 2***@qq.com :
IOS一直不行,IOS13.1
2018-08-13 15:14
2***@qq.com

2***@qq.com

这样写延迟小了


var nativeWebview, imm, InputMethodManager;
var initNativeObjects = function() {
if (mui.os.android) {
var main = plus.android.runtimeMainActivity();
var Context = plus.android.importClass("android.content.Context");
InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
} else {
nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
}
};
var showSoftInput = function() {
if (mui.os.android) {
imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
} else {
nativeWebview.plusCallMethod({
"setKeyboardDisplayRequiresUserAction": false
});
}
setTimeout(function() {
var inputElem = document.querySelector('input');
inputElem.focus();
inputElem.parentNode.classList.add('mui-active'); //第一个是search,加上激活样式
}, 200);
};
mui.plusReady(function() {
setTimeout(function() {
initNativeObjects();
showSoftInput();
},50)

});
2018-05-22 16:23
2***@qq.com

2***@qq.com

回复 1***@qq.com :
官网的写法,延迟只有一秒,我用过另一种,延迟有2s以上
2018-05-22 16:13