A soft keyboard instance pops up when the mobile terminal enters the page

<!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" onclick="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="">   < /div> <h3 class="tishiwenzi">Enter the core work area, you need to enter the PIN code and initialize the key key-Simkey</h3> </div>   </div>   <input type="password" readonly="">

<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() {
/ /You can write specific logic here to set the input that gets the focus
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,//Whether to repeatedly create a webview with the same id, the default is false: not repeat creation, directly display
show:{
autoShow:true,//page loaded event occurs After that, it will be displayed automatically, the default is true
aniShow:false,//page display animation, the default is "slide-in-right";
duration:false//page animation duration, Android platform defaults to 100 milliseconds, iOS platform defaults to 200 milliseconds;
}
})
},1000)
}
})



//Determine the user access model or browser
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf( 'Trident') > -1, //IE kernel
presto: u.indexOf('Presto') > -1, //opera kernel
webKit: u.indexOf('AppleWebKit') > -1, //Apple, Google kernel
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//Firefox kernel
mobile: !!u.match(/AppleWebKit.*Mobile.*/), / /Is it a mobile terminal
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios terminal
android: u.indexOf('Android' ) > -1 || u.indexOf('Adr') > -1, //android terminal
iPhone: u.indexOf('iPhone') > -1 , //whether it is iPhone or QQHD browser
iPad: u.indexOf ('iPad') > -1, //Whether the iPad
webApp: u.indexOf('Safari') == -1, //Whether the web app should have no header and bottom
Weixin: u.indexOf('MicroMessenger') > -1, //Whether WeChat (new on 2015-01-22)
qq: u.match(/\sQQ/i) == " qq" //Whether QQ
};
}(),
language:(navigator.browserLanguage || navigator.language). toLowerCase()
} //Call the method 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) {
//Event handling for keyboard popup
$('#container').css("height","150vh");
}
else {
//Event handling for keyboard retraction\
$('#container'). css("height","80vh");
} });
}
</script>
</body>

</html>

Copy and paste directly to see the effect, pay attention to the introduction of jquery.

A soft keyboard instance pops up when the mobile terminal enters the page

Guess you like