蔡繁荣
蔡繁荣
  • 发布:2015-12-26 20:48
  • 更新:2018-05-14 18:32
  • 阅读:8625

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

分类:HTML5+

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

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

最佳回复

蔡繁荣

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

// 示例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

maq

mark

x007xyz

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

好好8030

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

  • 撒网要见鱼

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

    2016-01-26 17:22

  • 好好8030

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

    2016-01-26 17:43

BruceAn

BruceAn

好东西,顶一下!

amourz

amourz

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

  • maq

    试试 <input type="number">

    2016-02-18 10:18

  • amourz

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

    2016-02-18 10:22

茄子

茄子

 大神,6s (plus)里面 输入法闪一下就没了,有时还看不出来弹,遇到过吗,,,,

  • 小白免

    我的也是,弹出闪一下就空白了

    2016-06-26 13:42

309741819@qq.com

309741819@qq.com

真是好东东···顶起 ··
刚学习前端

dhydghdq@sina.com

dhydghdq@sina.com - 人生中有两大爱好:读书和音乐

好东西,真真需要

vosome

vosome

怎么使用?有没有完整的代码?感谢

593823840@qq.com

593823840@qq.com

plus什么意思?

1043820383@qq.com

1043820383@qq.com

安卓下有延迟 怎么解决啊 @蔡繁荣

58468459@qq.com
我已无力吐槽

我已无力吐槽

你好,请问强制弹起后,怎么关闭

wenju

wenju - http://www.mescroll.com -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~

还是您这个方案靠谱 谢谢帮忙~

该问题目前已经被锁定, 无法添加新回复