<!----/此方法基於zepto.min.js-->
<!--/div元素沒有blur和focus事件,blur focus 只適用於input 這類的表格元素-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>解決IOS safari在input focus彈出輸入法時不支持position fixed的問題</title>
<style type="text/css" rel="stylesheet">
.speak-discuss{ position:fixed; bottom:0rem; font-size:0px; padding-top:0.15rem; padding-bottom:0.15rem; background-color:#fff; border-top:0.01rem solid #b3b3b3; z-index:188; width:100%; max-width:750px; left:auto; height:0.85rem; display:none; }
.speak-discuss form{ padding-left:0.22rem; padding-right:0.2rem; }
.speak-discuss i{ display:inline-block; vertical-align:middle; width:0.47rem; height:0.47rem; background:url(../images/icon29.png) center center no-repeat; background-size:0.47rem 0.47rem; position:absolute; left:0.22rem; top:50%; margin-top:-0.3rem;}
.speak-discuss input[type=text]{ padding:0px; outline:none; margin-left:0.72rem; border:0.01rem solid #ababab; line-height:0.66rem; padding-left:0.11rem; padding-right:0.11rem; border-radius:0.18rem; max-width:80%; width:80%;}
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="speak-discuss">
<form>
<i></i><input type="text" placeholder="評論" onfocus="javascript:if(this.value=='評論')this.value='';" />
</form>
</div>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript">
//只作用於輸入框獲得焦點時
$('.speak-discuss').focus(function(){
var _this = this;
//無鍵盤時輸入框到瀏覽器窗口頂部距離
var noInputViewHeight = $(window).height() - $(_this).height();
//網頁正文內容高度
var contentHeight = $(document).height() - $(_this).height();
//控制正文內容高度大於一屏，保證輸入框固定底部
contentHeight = contentHeight > noInputViewHeight ? contentHeight : noInputViewHeight;
//因為彈出輸入法需要時間，需延時處理
setTimeout(function(){
//彈出輸入法時滾動條的起始滾動距離
var startScrollY = $(window).scrollTop();
//彈出輸入法時輸入框到窗口頂部的距離，即到軟鍵盤頂部的起始距離
var inputTopHeight = $(_this).offset().top - startScrollY;
//彈出輸入法時輸入框預期位置，即緊貼軟鍵盤時的位置。因輸入框此時處於居中狀態，所以其到窗口頂部距離即為需往下移動的距離。
var inputTopPos = $(_this).offset().top + inputTopHeight;
//控制div不超出正文范圍
inputTopPos = inputTopPos > contentHeight ? contentHeight : inputTopPos;
//設置輸入框位置使其緊貼輸入框
$(_this).css({'position':'absolute', 'top':inputTopPos });
//給窗口對象綁定滾動事件，保證頁面滾動時div能吸附軟鍵盤
$(window).bind('scroll', function(){
//表示此時有軟鍵盤存在，輸入框浮在頁面上了
if (inputTopHeight != noInputViewHeight) {
//頁面滑動后，輸入框需跟隨移動的距離
var offset = $(this).scrollTop() - startScrollY;
//輸入框移動后位置
afterScrollTopPos = inputTopPos + offset;
//設置輸入框位置使其緊貼輸入框
$(_this).css({'position':'absolute', 'top':afterScrollTopPos });
}
});
}, 100);
})
$(".speak-discuss input").blur(function(){//輸入框失焦后還原初始狀態
$(".div-input").removeAttr('style');
$(window).unbind('scroll');
});
</script>
</body>
</html>