native 嵌套H5弹出虚拟键盘遮挡界面及其input 文本框上提及其置顶显示

版权声明：本文为博主原创文章，未经博主允许不得转载。

native 的虚拟键盘弹出input 文本框上提及其置顶显示

---

解决方案1：

   在各个的input输入框用标签包起来，例如：

 <form action=”javascript:void(0);”>
     <input />
 </form>
   
   
1
2
3
   
   
1
2
3

解决方案2：

      在于你的布局，可以用定位position:fixed;来做处理，因为他相对于页面来说，定位于屏幕一定的位置。

      以下代码用于直接将文档流中的元素移动到视区内，Android5.0+有效(只测了5.0和5.1，其他未知)，iOS没测过。

element.scrollIntoView();
   
   
1
   
   
1

      监听input元素的focus事件，以及window的resize事件。因为focus事件将在resize事件前触发。

      在resize事件中，获得浏览器可视区域的top和bottom。获得浏览器可视区域的位置：

var viewTop = $(window).scrollTop(), // 可视区域顶部
// 可视区域底部
// 不使用jQuery
var viewTop = document.body.scrollTop,
viewBottom = viewTop + window.innerHeight;

获得元素的在文档中的位置：

   var elementTop = $element.offset().top, 
   // $element是保存的input
   elementBottom = elementTop + $element.height();
   // 不使用jQuery
   /* 获得元素的位置信息 */
   var getElementPosition = function(elem) {
      var defaultRect = {top: 0, left: 0};
      var rect = (elem.getBoundingClientRect && elem.getBoundingClientRect()) || defaultRect;
      var ret = {
          Top: rect.top + document.body.scrollTop,
          left: rect.left + document.body.scrollLeft
      }
      return ret;
    }

    var elementTop = getElementPosition(element).top, // 元素顶部位置
    elementBottom = elementTop + element.clientHeight; // 元素底部位置
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

小结一下：

从上面的代码中看到其实：

判断元素是否在可视区域内，直接使用element.getBoundingClientRect()就好。

 // 调整视窗位置
 $(window).scrollTop(value); // 调整value
  // 不使用jQuery
  window.scrollTo(0, value); // 调整value调整到想要的效果。
   
   
1
2
3
4
   
   
1
2
3
4

解决方案3：

    //输入框获得焦点时，文字隐藏
    $(".targetInput").focus(function(){
        $(".state_fixed").hide();
    })
    //输入框失去焦点时，文字显示
    $(".targetInput").blur(function(){
        $(".state_fixed").show();
    })
   
   
1
2
3
4
5
6
7
8
   
   
1
2
3
4
5
6
7
8

解决方案4：(针对于Android部分手机不能用以上方法时)

在android代码中设置：

<activity
        android:name="com.ideal.studys.EditTime"
        android:label="@string/app_name" 
        android:windowSoftInputMode="stateHidden|adjustResize" >
</activity>
   
   
1
2
3
4
5
   
   
1
2
3
4
5

PS： Android中布局中分为，全屏显示与页眉显示，设置其为页眉显示。 
详细请查阅：http://blog.csdn.net/moruna/article/details/7879069