解诀由于软键盘引起的position: fixed;bottom: 0px;被软键盘顶上去。

转载自：http://yushuir.blog.163.com/blog/static/434671382015101794046407/

解诀由于软键盘引起的position: fixed;bottom: 0px;被软键盘顶上去。  

2015-11-17 09:44:23|  分类： JS|举报|字号 订阅

       

  下载LOFTER 我的照片书  |

在设计手机网站的时候，我们常使用position: fixed;bottom: 0px;来让一个DIV紧贴浏览器的底部，使它始终可以出现在屏幕上。但是当在网站上需要输入时，浏览器就会打开自带的软键盘，这时，原本紧贴底部的DIV也会浮上来，使输入的时候很不方便。

要解诀这个问题，其它一个方法就是将输入框绑事件，当输入框进入输入状态时，就交将原先fixed的属性改为static。可以变通改为这个问题。

//解决软键盘把fix项上去

            $("body").find("input[type=text]").each(function () {

                //alert($(this).data('target'));

                $(this).bind('focus', function () {

                    $('footer').css('position', 'static');

                }).bind('blur', function () {

                    $('footer').css({ 'position': 'fixed', 'bottom': '0' });

                });

            });

            $("body").find("textarea").each(function () {

                //alert($(this).data('target'));

                $(this).bind('focus', function () {

                    $('footer').css('position', 'static');

                }).bind('blur', function () {

                    $('footer').css({ 'position': 'fixed', 'bottom': '0' });

                });

            });