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

原创 2018年04月17日 15:45:16
<!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。

移动端弹出软键盘页面变形

之前写微信端页面,发现一个问题,就是,写好的页面, 在移动端测试时发现,有定位属性的元素,还有input框  莫名其妙的都在弹出软键盘的时候,各种扭曲,压缩, 测试后发现情况,我们在写的时候, 经常会...
  • lijie627239856
  • lijie627239856
  • 2017-06-09 17:45:41
  • 1825

Android避免进入页面EditText自动弹出软键盘

一、代码中调用 setSoftInputMode()方法进行设置: OnCreate方法里面加下面这句代码 ,很管用,而且再点EditBox也能让输入法正常弹出。。  getWindow().set...
  • Vivian8725118
  • Vivian8725118
  • 2014-04-08 14:57:32
  • 3867

Android进入页面显示软键盘

日常开发中,有时候需要进入页面就弹出软键盘(不如搜索),这样更方便用户操作 /** * 进入页面打开软键盘 * 首先要对指定的输入框请求焦点。然后调用输入管理器弹出软键盘。 ...
  • qq_33220645
  • qq_33220645
  • 2017-04-07 17:11:40
  • 500

Android进入页面开始就自动弹出软键盘

只需如下设置就可搞定: EditText edittext = (EditText)findViewById(R.id.edittext); edittext.setFocusabl...
  • y_chengyong
  • y_chengyong
  • 2015-01-10 13:51:37
  • 2795

移动端webapp,在进入某页面后,input框自动获取焦点并弹出数字键盘

在做项目的过程中,需求文档有个要求是,当进入页面后,第一个行input框要自动获取焦点,并弹出数字软键盘。autofocus 属性   :   文本输入字段被设置为当页面加载时获得焦点        ...
  • qq_36800701
  • qq_36800701
  • 2018-03-15 14:39:52
  • 375

android 开发中进入一个activity界面软键盘自动弹出解决(布局中有edittext)

其实就是EditText 焦点问题 下面我们就来解决这个问题,开发中为了快,我当时布局中有多个EditText,就在父布局中添加 android:focusable="true" android:f...
  • SongHongJun1989
  • SongHongJun1989
  • 2017-02-09 15:48:48
  • 1251

当移动端软键盘弹出时错位问题解决方案

问题源头 移动端虚拟键盘出现的条件是:文本框(文本类)获得焦点 但是文本框获得焦点未必会弹出键盘!!! 收起虚拟键盘的条件是:文本框失焦 PS:总而言之,我们认为会出现或者消失虚拟键盘的时候都...
  • jinxi1112
  • jinxi1112
  • 2016-09-10 13:44:05
  • 1242

EditText焦点问题:进入app之后,就弹出软键盘

现象进入app之后,首界面的EditText就获取焦点。把软键盘弹了出来解决方案第一种:父控件添加属性      在EditText的外层布局,添加如下代码。给EditText添加没有效果androi...
  • u010137760
  • u010137760
  • 2016-02-18 17:11:01
  • 1020

在移动端输入框在软键盘弹出后位置矫正

今天在做移动web端页面时遇到一个问题,当input框获取焦点时,弹出的软键盘遮住input框,在网上找了许多资料,终于找到解决方案 var clientHeight = document.body...
  • qq_37599827
  • qq_37599827
  • 2017-07-18 22:59:13
  • 1098

input自动获取焦点在移动端自动弹出手机软键盘

一、input自动获取焦点    正常来说,在input标签添加autofocus属性就可以了。代码如下:二、在使用Iscroll框架组件的页面实现input自动获取焦点   因为Iscroll 在初...
  • xinlingdexueba
  • xinlingdexueba
  • 2017-10-25 15:33:53
  • 1284
收藏助手
不良信息举报
您举报文章:移动端进入页面即可弹出软键盘实例
举报原因:
原因补充:

(最多只允许输入30个字)