【分享】如何打开页面默认弹出软键盘，同时兼容iOS和Android

分类：HTML5+

HTML5+ 技术分享键盘输入法

看了论坛中N篇关于“打开页面默认弹出软键盘”的回答，看都看花眼了，每次都要在错综复杂的关系中，去找出真正的“凶手”。在这里，我还是把这个坑填一下，我将完整的答案优化整理了下，同时兼容iOS和Android。
注：input不需要添加autofocus属性。

2015-12-26 20:48 负责人:无分享

20 个回复

最佳回复

蔡繁荣 (作者) - 发表是最好的记忆

// 示例1  
open_soft_keyboard({  
    input: "#username"  
});  
// 示例2  
open_soft_keyboard({  
    input: 'input[value=""]'  
});  

/**  
 * 默认打开软键盘  
 * @param options{  
 *   input: '#nickname' // 容器节点  
 * }  
 * @author 蔡繁荣  
 * @version 1.0.3 build 20151226  
 */  
function open_soft_keyboard(options){  
    if(plus.os.name == 'iOS'){  
        setTimeout(function(){  
            var wv_current = plus.webview.currentWebview().nativeInstanceObject();  
            wv_current.plusCallMethod({"setKeyboardDisplayRequiresUserAction":false});  
            document.querySelector(options['input']).focus();  
        }, 330);  
    }else{  
        // 因为安卓autofocus只有4.0版本以上才支持，所以这里使用native.js来强制弹出  
        setTimeout(function(){  
            // 在执行的时候需要让当前webview获取焦点  
            var wv_current = plus.android.currentWebview();  
            plus.android.importClass(wv_current);  
            wv_current.requestFocus();  

            var Context = plus.android.importClass("android.content.Context");  
            var InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");  
            var main = plus.android.runtimeMainActivity();  
            var imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);  
            imm.toggleSoftInput(0,InputMethodManager.SHOW_FORCED);  
            document.querySelector(options['input']).focus();  
        }, 330);  
    }  
}

小白免

正好需要，感谢~

郑家好人

不顶不是人！

maq

mark

x007xyz - 学习当中

留名

温柔如斯

赞一个，回来试试！

李大仁

好厉害。小白我请问一下高手，
// 示例1
open_soft_keyboard({
input: "#username"
});

这个参数#username 是input的id名称吗？每次在打开页面的时候初始化一次这个function open_soft_keyboard(options){}方法吗？

蔡繁荣 (作者)

是的，具体你可以看下源代码，document.querySelector(options['input']).focus();

2016-01-13 14:22

不知道

感谢分享！
有个问题问下：
input type属性是search的时候软键盘回车按钮不是搜索单击input后才能显示回车为搜索
系统为安卓5.0.1

蔡繁荣 (作者)

不会吧，不过我觉得这其实不是问题，不影响

2016-01-26 15:22

好好8030

请问，这里的“plus.os.name=‘ios’”这块，plus是什么？这里写页面的时候需要加入什么js脚本吗？

撒网要见鱼

plus 是5+环境,需要用hbuild真机运行或者用dcloud 的sdk 离线打包后才能有的.

2016-01-26 17:22
好好8030

回复撒网要见鱼:非常谢谢您的回答！

2016-01-26 17:43

BruceAn

好东西，顶一下！

amourz

安卓5.1，为何弹出的不是数字键盘呢

maq

试试 <input type="number">

2016-02-18 10:18
amourz

谢谢回复，type就是number类型的，ios会弹出数字键盘，安卓下自动弹出的却是字母键盘，输入法是讯飞。我试过注释掉自动弹出代码，手动定位到input框，弹出的是数字键盘。

2016-02-18 10:22