爱玺玺

爱玺玺的生活日记本。wx:lb87626

彻底解决safari浏览器软键盘遮住输入框的问题

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
<!--    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>fixed测试页面</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">-->


  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <script src="../js/jquery-1.js"></script>
<style>
#mainbox li{ width:100$; height:50px; border:solid 0px #ff0; list-style:none; font-size:26px;}
.topheadlist{position:absolute; width:100%; height:20%; background:#ff0; overflow-y:scroll; border:solid 4px #f0f; box-sizing:border-box; z-index:999999;}
</style>   
</head>

<body style="margin:0px; padding:0px;">
    <!--<div class="topheadlist"></div>-->
    <div style="position:absolute; width:100%; height:80%; margin-top:0%; background:#fff; overflow-y:scroll; border:solid 4px #fff; box-sizing:border-box;" id="mainbox">
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>
       <li>11</li>
       <li>12</li>
       <li>13</li>
       <li>14</li>
       <div id="xianshi" style="position:fixed; bottom:200px; height:20px; width:50%; height:20px; background:#f00; color:#000; z-index:99999;"></div>
    </div>
    <div style="position:absolute; width:100%; height:20%; background:#ccc; bottom:0%; box-sizing:border-box; z-index:9999;" id="sendbox">
        <input type="text" id="testbtn" style="width:60%; height:30px;"/>   <input type="button" value="发送" id="sendbtn"/><!--<textarea></textarea>-->
    </div>
<script>
$("#mainbox").scrollTop(document.getElementById("mainbox").scrollHeight);

function safari(){
  $("#xianshi").html($(document).scrollTop());
  if($(document).scrollTop()!=300) $('body').scrollTop(300);
}

$("#sendbtn").click(function(){
   $("#testbtn").trigger("click").focus();
});

var mb = myBrowser();
if ("Safari" == mb) {
    setInterval(safari,200);
}

function myBrowser(){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {
        return "Opera"
    }; //判断是否Opera浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
  return "Chrome";
 }
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }; //判断是否IE浏览器
}
</script>    
</body>
</html>

发表评论:

Powered By Z-BlogPHP 1.4 Deeplue Build 150101

Copyright Your WebSite.Some Rights Reserved.

蜀ICP备11021721号-5