wsir
wsir
  • 发布:2015-01-09 00:42
  • 更新:2019-05-10 22:12
  • 阅读:74504

打开页面默认弹出键盘

分类:Native.js

大家好,如果当页面加载完成时,默认就打开软键盘,而不是每次加载我都要手动点击一下。
另外,我将inpurt增加autofocus,同样需要手动点击才显示键盘

补充一下,我把<script src="../js/mui.min.js"></script>去掉就好了,请问这里面哪些代码影响了

2015-01-09 00:42 负责人:无 分享
已邀请:

最佳回复

DCloud_App_Array

DCloud_App_Array

更新于2016-1-15,最新答案见:http://ask.dcloud.net.cn/article/513

============以下为历史答案==================
autofocus不一定在所有Android平台支持自动弹出软键盘,可以通过native.js来强制弹出:

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="utf-8">  
		<title>Native.js</title>  
		<script type="text/javascript">  
// H5 plus事件处理  
function plusReady(){  
	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.addEventListener("plusready",plusReady,false);  
		</script>  
	</head>  
	<body>  
		<button onclick="plus.webview.currentWebview().close()">Close</button><br/>  
		<input type="text" autofocus="autofocus"/>  
		<br/>  
		打开页面后编辑框自动获取焦点并显示软键盘  
	</body>  
</html>

注意:autofocus属性只有4.0以上版本才支持

iOS打开页面自动弹出键盘(input不要添加autofocus)

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>Native.js</title>  
        <script type="text/javascript">  
// H5 plus事件处理  
function plusReady(){  
  
    var webView = plus.webview.currentWebview().nativeInstanceObject();  
    webView.plusCallMethod({"setKeyboardDisplayRequiresUserAction":false});  
    document.getElementById("testautofocus").focus();  
}  
document.addEventListener("plusready",plusReady,false);  
        </script>  
    </head>  
    <body>  
        <button onclick="plus.webview.currentWebview().close()">Close</button><br/>  
        <input type="text" id="testautofocus"/>  
        <br/>  
        打开页面后编辑框自动获取焦点并显示软键盘  
    </body>  
</html>
  • wsir (作者)

    太感谢了,同样也希望这个问题对大家都有帮助


    2015-01-10 15:21

  • liangyue

    ios 下可以弹起吗


    2015-01-12 09:33

  • DCloud_App_Array

    Native.js也应该可以做到,@697 确认下


    2015-01-12 12:02

  • 海中的誓言

    @46 怎么判断键盘现在是否已经处于弹出的状态呢?


    2015-01-14 17:24

  • DCloud_App_Array

    回复 海中的誓言:

    android原生没有有效API可判断这个状态,后续5+会通过窗口大小的变化来封装此功能API,目前利用js处理此问题的参考思路:



    1. 通过监听窗口的大小变化事件(需要区分横竖屏变化)

      window.addEventListener("resize",function(){

      //

      },false);

    2. 在事件函数中获取窗口的高度来判断是否弹出软键盘(弹出软键盘时窗口高度会变小)

      window.innerHeight可获取窗口高度


    2015-01-15 14:30

  • Dennis

    软键盘总是弹出一下就又关闭了,如何解决??


    2015-06-22 09:39

  • 蔡繁荣

    回复 Dennis:iOS平台我也遇到了


    2015-07-18 01:14

  • 蔡繁荣

    iOS平台下软键盘总是弹出一下就又关闭了,如何解决?


    2015-07-18 01:14

  • DCloud_IOS_XTY

    @31474 你的是啥情况加我qq聊聊


    2015-08-04 17:36

  • 叶孤村

    回复 DCloud_IOS_XTY:我从A窗口中弹出B窗口,我在B窗口中做上面这个逻辑,的确可以用,,但是,实际使用时,我的B窗口是预加载的,不能像上面那样直接close,其实是hide,然后问题就来了,我在B窗口的show事件中处理弹出键盘逻辑,并用document.getElementById("input").focus()获取焦点,每次键盘都能成功弹出来,但输入框上就是没有光标定位过来,因此在键盘上输内容也就无效了,不知这种情况该如何处理???我调试过执行document.getElementById("input").focus()后document.activeElement确实已经是input对象了,可就是获取不到光标。。。


    2015-08-06 19:27

  • 叶孤村

    回复 DCloud_IOS_XTY:是在安卓下测的,ios下还没看


    2015-08-06 19:39

  • 小权

    回复 DCloud_IOS_XTY:在ios测试,A页面openwindow打开B,B中按以上代码实现自动获取焦点弹出软键盘。真机调试,A打开B的时候,有时候正常,有时候会出现刚获取了焦点打开软键盘,很快又失焦键盘自动收起了。


    2015-09-23 10:43

  • 许志伟

    回复 wsir:求demo。。。


    2015-12-22 18:37

  • 2***@qq.com

    安卓软键盘打开 延迟比较严重啊 请问有什么能解决这个问题的方法吗 感谢啊


    2017-07-10 16:31

8023

8023

键盘弹出页面闪烁---求解???????

  • a***@163.com

    解决了吗?我也遇到这个问题~在IOS下面是这样的


    2017-01-09 16:10

小云菜

小云菜 - 相关代码及分享在http://www.cnblogs.com/phillyx

DCloud_App_Array 回复的:安卓autofocus只有4.0版本以上才支持,我目前是4.4不可用,
依然要code 来触发

setTimeout(function() {  
						openSoftKeyboard();  
						tmpinput.focus();  
					}, 600);

这样就解决了我提出的autofocus不可用的问题了

  • 为乐而来

    setTimeout(function() {document.getElementById("id").focus();}, 600);


    2016-05-30 18:52

DIOGO

DIOGO

好像还是有点问题。
一弹出来就隐藏了。

  • 旭仔

    我的也是 后来有解了么?


    2015-06-17 22:32

  • Dennis

    回复 旭仔:这样就行了,

    setTimeout(function(){

    imm.toggleSoftInput(0,InputMethodManager.SHOW_FORCED);

    },200);


    2015-06-22 09:46

追逐者

追逐者

还有一个效果不知道能不能实现,当我页面从右侧关闭时,软键盘的关闭可不可以也从右侧滑动关闭呢

x007xyz

x007xyz - 学习当中

最后还是没解决,真是无语。

小云菜

小云菜 - 相关代码及分享在http://www.cnblogs.com/phillyx

安卓下动态添加autofocus属性获取不到焦点,求助。。。

	var openSoftKeyboard = function() {  
					if (mui.os.ios) {  
						var webView = plus.webview.currentWebview().nativeInstanceObject();  
						webView.plusCallMethod({  
							"setKeyboardDisplayRequiresUserAction": false  
						});  
					} else {  
						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);  
					}  
				}  
				var autoFocus = function() {  
					var tmpname = plus.webview.currentWebview().data.name;  
					var tmpinput = document.getElementById(tmpname);  
					if (mui.os.ios) {  
						openSoftKeyboard();  
						tmpinput.focus();  
					} else {  
						//动态添加autofocus获取不到焦点  
						tmpinput.setAttribute('autofocus', 'autofocus');  
						setTimeout(function() {  
							openSoftKeyboard();  
						}, 600);  
					}  
				}
小云菜

小云菜 - 相关代码及分享在http://www.cnblogs.com/phillyx

var oldback=mui.back;  
				mui.back=function () {  
					//预加载页面返回时为隐藏,不会自动关闭输入法,通过blur来关闭  
					if (schparms.isES) {  
						document.getElementById("search").blur();  
					}  
					oldback();  
				}
rodgerz

rodgerz

比较全面的解决了打开软键盘和autofocus的问题

var openSoftKeyboard = function() {  
        if(mui.os.ios){  
            var webView = plus.webview.currentWebview().nativeInstanceObject();  
            webView.plusCallMethod({  
                "setKeyboardDisplayRequiresUserAction": false  
            });  
        }else{  
            var webview = plus.android.currentWebview();  
			plus.android.importClass(webview);  
			webview.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);  
        }  
    }  
  
//页面隐藏事件  
			plus.webview.currentWebview().addEventListener("hide",function(e){  
				document.getElementById("search-text").value="";  
		    		document.getElementById("search-text").blur();//搜索框取消焦点,关闭软键盘  
			});  
			//页面显示事件  
			plus.webview.currentWebview().addEventListener("show",function(e){  
				setTimeout(function() {//自动打开软键盘,搜索框获取焦点  
                		openSoftKeyboard();  
		    			document.getElementById("search-text").focus();  
            		}, 300);  
			});
  • 小云菜

    input取消焦点,建议如下做:var ac=document.activeElement; x.value&&x.value='';x.blur();


    2015-08-20 15:12

  • rodgerz

    回复 小云菜:谢谢指点


    2015-08-20 16:28

温锐

温锐

ios呢

  • rodgerz

    ios通用的


    2015-09-29 14:16

beckzl

beckzl

软键盘不能自动弹出; 而且报这个错:Cannot read property 'SHOW_FORCED' of null

求解 ?

万变的律

万变的律

如果要启动 数字键盘,怎么设置?????

yank90

yank90

键盘时不时的弹出来又缩回去了! 有解决办法吗? 安卓4.2.2 机器。

rodgerz

rodgerz

plus.webview.currentWebview().addEventListener("show",function(e){
setTimeout(function() {//自动打开软键盘,搜索框获取焦点
app.openSoftKeyboard();
document.getElementById("search-text").focus();
}, 500);
});

我感觉是andriod机器页面渲染速度普遍比较慢,所以setTimeout的延迟时间要设大,但是andriod手机性能参差不齐,不同的手机可能延迟时间都不一样,所以比较纠结

3***@qq.com

3***@qq.com - 阿成

请问下 这个第六行报错是怎么回事?另外运行了hbuilder也不是加载完自动打开软键盘,要点击input框才会出现,在就是点击close会关闭整个hbuilder,求解答

liangyue

liangyue

同问

  • wsir (作者)

    我在网上找了好久,发现很多人都在问,但没有找到解决的办法


    2015-01-09 09:44

bequite

bequite - DTD

再trigger一下click如何

  • wsir (作者)

    好像没什么用


    2015-01-09 11:38

DCloud_UNI_FXY

DCloud_UNI_FXY

把你的页面代码发出来,我试试

  • wsir (作者)

    已经传符件


    2015-01-09 16:14

wsir

wsir (作者)

写的个测试页面,test1.html跳转test2.html页面,test1的键盘在页面加载时不会自动弹出,test2的键盘把<script src="../js/mui.min.js"></script>和mui.init();去掉就会自动弹出

  • x007xyz

    我的弹出又隐藏了。


    2015-06-11 11:08

DCloud_UNI_FXY

DCloud_UNI_FXY

你是在哪里怎么测试的?我在Hbuilder中。用你的代码真机测试,即使去掉了test2里mui相关js,也不会弹出

  • wsir (作者)

    我就是用HBuilder编译器发布到手机看的,另外,我在微信里面点开,也可以有这效果


    2015-01-09 16:56

追逐者

追逐者

加上setTimeout就可以了

  • 旭仔

    嗯,确实好了


    2015-06-17 22:40

  • 许志伟

    回复 旭仔:求个demo。。。


    2015-12-22 18:28

DCloud_IOS_XTY

DCloud_IOS_XTY

iOS打开页面自动弹出键盘
var webView = plus.webview.currentWebview().nativeInstanceObject();
webView.plusCallMethod({"setKeyboardDisplayRequiresUserAction:":false});
document.getElementById("输入框id").focus();

  • 你好,请问这段代码oc应该怎么写合适?


    2017-08-29 10:00

小和尚ABC

小和尚ABC - 金融公司,公司都是mui项目,金融电商等类型都做过。

那个最新的连接,软键盘打开有延迟。

s***@163.com

s***@163.com - sddw81

键盘是出来了,input不能获取焦点document.getElementById("输入框id").focus();

s***@vip.qq.com
2***@qq.com

2***@qq.com - 90it

用这个,延迟小一些

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)

		});
n***@qq.com
9***@qq.com

9***@qq.com

软件弹出来 的确认按钮 有时候是搜索样式,有时候是回车样式. 可以不可以给软件盘上面的确认按钮指定样式呢

6***@qq.com

6***@qq.com

刚试过这个按键事件,应为我是PDA开发,有很多按键需要按,特别是一些功能键,可用以下方法,只能返回键,电话,挂断,音量加减可以用,其他的键均无效,不知道为什么用屏蔽其他的按键,还是觉得都是触摸屏,没有必要做呢。。

郁闷ing。。。。

能给修复以下吗?

function plusReady() {
// 监听键按下事件
plus.key.addEventListener("keydown", function(e) {
console.log("keydown: " + e.keyCode)
}, false);
// 监听键松开事件
plus.key.addEventListener("keyup", function(e) {
console.log("keyup: ")
}, false);
// 监听长按键事件
plus.key.addEventListener("backbutton", function(e) {
console.log("backbutton: ")
}, false);
// 设备“菜单”按钮按键事件
plus.key.addEventListener("menubutton", function(e) {
console.log("menubutton: " + e.keyCode)
}, false);
// 设备“搜索”按钮按键事件
plus.key.addEventListener("searchbutton", function(e) {
console.log("searchbutton: " + e.keyCode)
}, false);
// 设备“音量+”按钮按键事件
plus.key.addEventListener("volumeupbutton", function(e) {
console.log("volumeupbutton: " + e.keyCode)
}, false);
// 设备“音量+”按钮按键事件
plus.key.addEventListener("volumedownbutton", function(e) {
console.log("volumedownbutton: " + e.keyCode)
}, false);
}

		plusReady();
  • DCloud_heavensoft

    不是屏蔽,是我们不知道这些多出来的键叫什么


    2019-05-10 22:23

  • 6***@qq.com

    回复 DCloud_heavensoft: 那有办法通过开发keycode的方式自定义吗,按任何一个键,只要能返回一个键值就可以,可以自定义处理方法


    2019-05-10 23:30

  • 6***@qq.com

    回复 DCloud_heavensoft: 其实在java原生里,android.view.KeyEvent这个类定义了很多KeyEvent.keycode,只要能支持这些就OK了


    2019-05-10 23:41

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