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

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



<html>
    <head>
        <title>TODO supply a titletitle>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    head>
    <body>
        <a onClick="onc()">dasdasda>
        <div style="width:400px; height:400px; border: 1px solid #f00;">div>
            <div id="nn" style="border:1px solid #666">
                <div style="height:900px;">sadasdasddiv>  
            div>
    body>
    <script type="text/javascript">
   //作为一个事件的函数来被调用
        function onc () {
        var dd = document.getElementById("nn").scrollIntoView(true);     //这个意思其实就是将这个元素到顶部来浏览器窗口的顶部来显示
    }
    script>
html>

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

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

=========================================

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



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

你可能感兴趣的:(Html5)