关于移动端软键盘与输入框的遮挡问题

scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持，其实就这个解释来说，我觉得还是不够的，最好还是又图对吧，来看下图，更好理解：

 1 <!DOCTYPE html>
 2 <!--
 3 To change this license header, choose License Headers in Project Properties.
 4 To change this template file, choose Tools | Templates
 5 and open the template in the editor.
 6 -->
 7 <html>
 8     <head>
 9         <title>TODO supply a title</title>
10         <meta charset="UTF-8">
11         <meta name="viewport" content="width=device-width, initial-scale=1.0">
12     </head>
13     <body>
14         <a onClick="onc()">dasdasd</a>
15         <div style="width:400px; height:400px; border: 1px solid #f00;"></div>
16             <div id="nn" style="border:1px solid #666">
17                 <div style="height:900px;">sadasdasd</div>  
18             </div>
19     </body>
20     <script type="text/javascript">
21    //作为一个事件的函数来被调用
22         function onc () {
23         var dd = document.getElementById("nn").scrollIntoView(true);     //这个意思其实就是将这个元素到顶部来浏览器窗口的顶部来显示
24     }
25     </script>
26 </html>

这个id为nn的ｄｉｖ就会到浏览器窗口的顶部显示；

至于false，你可以自行去尝试一下，效果也是很明显的，

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

通过这个函数做的一个小实例，锁定网页的导航条，然后点击导航，调到指定的div，这个功能在一般的网页设计中是很常见的，看代码：

 1 <!DOCTYPE html>
 2 <!--
 3 To change this license header, choose License Headers in Project Properties.
 4 To change this template file, choose Tools | Templates
 5 and open the template in the editor.
 6 -->
 7 <html>
 8     <head>
 9         <title>nav测试</title>
10         <meta charset="UTF-8">
11         <meta name="viewport" content="width=device-width, initial-scale=1.0">
12         <style type="text/css">
13             *{margin:0; padding:0}
14             body{width:960px; height:2000px; margin:0 auto; border: 1px dotted #432432;}
15             ul,li{list-style-type: none;}
16             a{text-decoration: none;}
17             .nav{border:1px solid #000; 
18                  height:30px; 
19                  z-index:9999; 
20                 position:fixed ; 
21                 top:0px;
22                 _position:absolute;
23                 _top:expression(documentElement.scrollTop + "px");
24             }
25             .nav ul li{
26                 float:left;
27                 font-size: 16px;
28                 line-height: 30px;
29                 padding:0px 63px;
30             }
31             .nav ul li:hover{
32                 background: #23ded3;
33             }
34             #main{
35                 height:1000px; 
36                 border:1px solid #f00;
37                 margin-top:30px;
38             }
39             #div1{
40                 height:400px;
41                 border: 1px solid #ccc;
42             }
43              #div2{
44                 height:400px;
45                 border: 1px solid #ccc;
46             }
47              #div3{
48                 height:400px;
49                 border: 1px solid #ccc;
50             }
51         </style>
52     </head>
53     <body>
54         <div id="headr">
55             <div class="nav">
56                 <ul>
57                     <li><a>首页</a></li>
58                     <li><a onclick="onc()">你好</a></li>
59                     <li><a>很好</a></li>
60                     <li><a>他好</a></li>
61                     <li><a>真的</a></li>
62                     <li><a>哦哦</a></li>
63                 </ul>
64             </div>
65         </div>
66         <div id ="main" style="width:960px; height: auto;">
67             <div id="div1">
68                 <p>我是ｄｉｖ１的内容</p>
69             </div>
70             <div id="div2">
71                 <p>我是ｄｉｖ2的内容</p>
72             </div>
73             <div id="div3">
74                 <p>我是ｄｉｖ3的内容</p>
75             </div>
76         </div>
77         <div id ="footr"></div>
78     </body>
79     <script type="text/javascript">
80         var dHeight = document.documentElement.clientHeight;
81         var div1 = document.getElementById("div1");
82         var div2 = document.getElementById("div2");
83         var div3 = document.getElementById("div3");
84         div1.style.height = dHeight - 30 + "px";        //通过一个js动态的来确定每个div的高度,还可以通过循环来实现，这里就不加了，各位自己可尝试
85         div2.style.height = dHeight -30 + "px";
86         div3.style.height = dHeight -30 + "px";
87             var li = document.getElementsByTagName("li");
88             li[0].onclick = function(){
89                 div1.scrollIntoView(false);          //这里不能给true不然会将会与导航条重叠
90             }
91             li[1].onclick = function(){
92                 div2.scrollIntoView(false);
93             }
94             li[2].onclick = function(){
95                 div3.scrollIntoView(false);
96             }
97     </script>
98 </html>

测试微信浏览器输入框与软键盘交接demo

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name=viewport content="width=device-width, initial-scale=1">
 7     <title></title>
 8     <link rel="stylesheet" href="">
 9     <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
10     <style>
11         * {
12             margin: 0;
13             padding: 0;
14             box-sizing: border-box;
15         }
16 
17         body {
18             position: relative;
19             background: #ccc;
20         }
21 
22         .sendMsg {
23             width: 100%;
24             height: 40px;
25             padding: 0 15px;
26             color: #000;
27             outline: none;
28             border: 1px solid #f60;
29             position: absolute;
30             bottom: 0;
31             left: 0;
32         }
33 
34     </style>
35 </head>
36 <body>
37     <input class="sendMsg" type="text" placeholder="发送留言">
38 
39     <script type="text/javascript">
40         var winHeight = $(window).height();
41         $('body').css('height', winHeight);
42 
43         $('.sendMsg').click(function(e) {
44             e.preventDefault();
45             document.querySelector('.sendMsg').scrollIntoView(false);
46         })
47     </script>
48 </body>
49 </html>

 

posted @ 2017-05-08 09:44  傅恒  阅读(665)  评论(0)  编辑  收藏  举报