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

<!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");
}

}
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。

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

打开页面默认弹出软键盘，同时兼容iOS和Android
// 示例1 open_soft_keyboard({input: "#username" }); // 示例2 open_soft_keyboard({input: 'input ...
android仿微信、QQ等聊天界面，实现点击输入框弹出软键盘、点击其他区域收起软键盘，默认滑动至最低端
如图所示,点击输入框及选择图片和发送按钮时软键盘显示且不消失,点击其他区域,则隐藏软键盘. 主要代码如下: override fun dispatchTouchEvent(ev: MotionEven ...
Android --- 进入页面时，不弹出软键盘。当 EditText 被点击时不弹出软键盘，而是调用其他选择器，比如时间选择器等
功能需求: 1.进入页面时,不弹出软键盘 2.当 EditText 被点击时不弹出软键盘,而是调用其他选择器,比如时间选择器等搜索百度测试: 1.百度上说用 editText.setInputTyp ...
MUI开发APP文本框获得焦点并弹出软键盘
在使用MUI开发APP时,经常需要让文本框获得焦点,并弹出软键盘,方便用户操作.在使用混合模式开发时,这需要调用Native.js方法. MUI官网展示了调用软键盘的示例:MUI官网示例. 调用软键盘 ...
android 键盘将底部视图顶起,android 弹出软键盘将底部视图顶起问题
今天要做一个搜索功能,搜索界面采用AutoCompleteTextView做搜索条,然后下面用listview来显示搜索结果,而我的主界面是在底部用tab做了一个主界面导航,其中有一个搜索按钮,因为 ...
苹果浏览器弹出软键盘遮挡底部fixed定位问题
ios微信浏览器将fixed定位自动转换为absolute定位软键盘遮挡input弹窗如下图: 苹果手机会弹出软键盘后遮挡住这个评论发布框解决办法: 我采用让他滚动到底部,然后软键盘就不会挡住输 ...
Android EditText获取焦点后只显示光标不弹出软键盘
Android EditText获取焦点后只显示光标不弹出软键盘参考博客链接直接说结论如果你项目适配的最小版本大于等于21 //直接调用EditText的该方法,设置为false即可 bindi ...
Android 进入Activity禁止弹出软键盘输入法及stateHidden和stateAlwaysHidden的区别
在开发中经常会遇到这样的问题,进入一个含Edittext的Activity后总是会自动弹出软件盘.但是有时候我们又不想让它弹出,因为影响美观,而且用户可能也会反感.最好的做法是刚进入时不让弹出,在用户 ...
popwindow setFocusable(false) 不消失与弹出软键盘的冰火不容的矛盾
这是android的bug吗??? 有的手机设置setOutsideTouchAble(false),就可以让其在点击pop区域以外不消失,但是有的手机需要设置setFocusable(false)才 ...

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

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

最新文章

热门文章