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

<!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="">  
        <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。

阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页