移动端进入页面即可弹出软键盘实例

最新推荐文章于 2022-09-28 16:17:27 发布

晨晨快跑

最新推荐文章于 2022-09-28 16:17:27 发布

阅读量2.4k

点赞数

分类专栏：技术文章标签：软键盘安卓ios

本文链接：https://blog.csdn.net/baidu_38027860/article/details/79975869

版权

技术专栏收录该内容

118 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>输入PIN密码</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/layer.css"/>
<link rel="stylesheet" type="text/css" href="../css/whole.css"/>
<link rel="stylesheet" type="text/css" href="../css/yetouyangshi.css"/>
<link rel="stylesheet" type="text/css" href="../css/shuruPin.css"/>
</head>
<body>

<div id="yetou">
<p id="fanhui" οnclick="mui.back()"><img style="margin-top: 0.3rem;" src="../img/zuo.png"/></p>
<h3 id="tit">输入PIN密码</h3>
<span id="tongbu">
下一步
</span>
</div>

<div id="container">
<p id="wenzi">请输入 P I N 密码</p>
<div class="pwd-box">
<input type="tel" maxlength="6" class="pwd-input" id="pwd-input">
<div class="fake-box">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
</div>
</div>
<h3 class="tishiwenzi">进入核心工作区，需要您输入PIN码，初始化密钥钥匙-Simkey</h3>
</div>
<script src="../js/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/shuruPin.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// H5 plus事件处理
function plusReady() {
// 设置系统状态栏背景为红色
var type = plus.os.name;
if(type == "iOS") {
plus.navigator.setStatusBarBackground("#368CBD");
} else {
plus.navigator.setStatusBarBackground("#368CBD");
}

var $input = $(".fake-box input");
$("#pwd-input").on("input", function() {
var pwd = $(this).val().trim();
for (var i = 0, len = pwd.length; i < len; i++) {
$input.eq("" + i + "").val(pwd[i]);
}
$input.each(function() {
var index = $(this).index();
if (index >= len) {
$(this).val("");
}
});
if (len == 6) {
//执行其他操作
}
});
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() {
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();
}, 10);
};
mui.plusReady(function() {
initNativeObjects();
showSoftInput();
});

}
if(window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}

$("#tongbu").click(function(){
var pwdVal=$("#pwd-input").val();
if(pwdVal == ""){
layer.open({
content: '请输入初始PIN密码!',
style: 'background-color:#368CBD; color:#fff; border:none;',
time: 2
});
}else if(pwdVal !="123456"){
layer.open({
content: 'PIN密码不正确，请重新输入!',
style: 'background-color:#368CBD; color:#fff; border:none;',
time: 2
});
$("#pwd-input").val("");
}else{
$("#longin").css("display","-webkit-box")
setTimeout(function(){
$("#longin").css("display","none")
mui.openWindow({
url:"shezhiwenti.html",
createNew:true,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
show:{
autoShow:true,//页面loaded事件发生后自动显示，默认为true
aniShow:false,//页面显示动画，默认为”slide-in-right“；
duration:false//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
}
})
},1000)
}
})



//判断用户访问机型或者浏览器
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信（2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

//调用方法
if(browser.versions.android){
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; $(window).on('resize', function () {
var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (clientHeight > nowClientHeight) {
//键盘弹出的事件处理
$('#container').css("height","150vh");
}
else {
//键盘收起的事件处理\
$('#container').css("height","80vh");
} });
}
</script>
</body>

</html>

直接复制粘贴即可看到效果了，注意引入jquery。

晨晨快跑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
移动端进入页面即可弹出软键盘实例

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;输入PIN密码&lt;/title&gt; &lt;meta name="viewport" content="initial-scale=1.0, maximum-
复制链接

扫一扫