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

2017-10-26 1125 1 编辑:深正互联 来源:互联网

scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐。

<!DOCTYPE html>

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<html>

<head>

<title>TODO supply a title</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<a onClick="onc()">dasdasd</a>

<div style="width:400px; height:400px; border: 1px solid #f00;"></div>

<div id="nn" style="border:1px solid #666">

<div style="height:900px;">sadasdasd</div>  

</div>

</body>

<script type="text/javascript">

   //作为一个事件的函数来被调用

function onc () {

var dd = document.getElementById("nn").scrollIntoView(true);

               //这个意思其实就是将这个元素到顶部来浏览器窗口的顶部来显示

}

</script>

</html>

这个id为nn的div就会到浏览器窗口的顶部显示;

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


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

<!DOCTYPE html>

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<html>

<head>

<title>nav测试</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">

*{margin:0; padding:0}

body{width:960px; height:2000px; margin:0 auto; border: 1px dotted #432432;}

ul,li{list-style-type: none;}

a{text-decoration: none;}

.nav{border:1px solid #000; 

height:30px; 

z-index:9999; 

position:fixed ; 

top:0px;

_position:absolute;

_top:expression(documentElement.scrollTop + "px");

}

.nav ul li{

float:left;

font-size: 16px;

line-height: 30px;

padding:0px 63px;

}

.nav ul li:hover{

background: #23ded3;

}

#main{

height:1000px; 

border:1px solid #f00;

margin-top:30px;

}

#div1{

height:400px;

border: 1px solid #ccc;

}

#div2{

height:400px;

border: 1px solid #ccc;

}

#div3{

height:400px;

border: 1px solid #ccc;

}

</style>

</head>

<body>

<div id="headr">

<div class="nav">

<ul>

<li><a>首页</a></li>

<li><a onclick="onc()">你好</a></li>

<li><a>很好</a></li>

<li><a>他好</a></li>

<li><a>真的</a></li>

<li><a>哦哦</a></li>

</ul>

</div>

</div>

<div id ="main" style="width:960px; height: auto;">

<div id="div1">

<p>我是div1的内容</p>

</div>

<div id="div2">

<p>我是div2的内容</p>

</div>

<div id="div3">

<p>我是div3的内容</p>

</div>

</div>

<div id ="footr"></div>

</body>

<script type="text/javascript">

var dHeight = document.documentElement.clientHeight;

var div1 = document.getElementById("div1");

var div2 = document.getElementById("div2");

var div3 = document.getElementById("div3");

div1.style.height = dHeight - 30 + "px";

                //通过一个js动态的来确定每个div的高度,还可以通过循环来实现,这里就不加了,各位自己可尝试

div2.style.height = dHeight -30 + "px";

div3.style.height = dHeight -30 + "px";

var li = document.getElementsByTagName("li");

li[0].onclick = function(){

div1.scrollIntoView(false);  

                                //这里不能给true不然会将会与导航条重叠

}

li[1].onclick = function(){

div2.scrollIntoView(false);

}

li[2].onclick = function(){

div3.scrollIntoView(false);

}

</script>

</html>

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name=viewport content="width=device-width, initial-scale=1">

<title>qdabc.cn</title>

<link rel="stylesheet" href="">

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}


body {

position: relative;

background: #ccc;

}


.sendMsg {

width: 100%;

height: 40px;

padding: 0 15px;

color: #000;

outline: none;

border: 1px solid #f60;

position: absolute;

bottom: 0;

left: 0;

}


</style>

</head>

<body>

<input class="sendMsg" type="text" placeholder="发送留言">


<script type="text/javascript">

var winHeight = $(window).height();

$('body').css('height', winHeight);


$('.sendMsg').click(function(e) {

e.preventDefault();

document.querySelector('.sendMsg').scrollIntoView(false);

})

</script>

</body>

</html>

深正互联,每天分享,每天快乐~快来关注我们吧~


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联