標籤：onscroll 代碼 滾動 tis 一個 var 蘋果 輸入 name
請看第一題：
為什麼我的input擷取焦點後，被IME遮住了。
解決辦法：
源碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.0.js"></script> <style> input{display: block} </style></head><body><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"><input type="text" value="123456"></body><script> //處理input輸入框被IME遮住 function inputIos(inputBox){ var inputF = $(inputBox).find(‘input‘);//找到對應的input if(inputF == document.activeElement){ //擷取焦點時用喔 setTimeout(function(){ var inputIsNotInView = notInView(), Width = window.innerWidth, Height = window.innerHeight; if(inputIsNotInView){ if(Width != 750){ var bottomAdjust = (Height - window.innerHeight - 88) + ‘px‘; $(inputBox).css(‘bottom‘,bottomAdjust); }else { var bottomAdjust = (Height - window.innerHeight - 88 - 432) + ‘px‘; $(inputBox).css(‘bottom‘,bottomAdjust); } } },600); }else { //失去焦點時用喔 var inputIsNotInView=notInView(); if(inputIsNotInView){ $(inputBox).css({‘opacity‘:0,bottom:0}); setTimeout(function(){ $(inputBox).css(‘opacity‘,1); },600) } } //------------------------------ function notInView(){ var bottom = inputBox.getBoundingClientRect().bottom; if (window.innerHeight - bottom < 0){ return true; }else { return false; } }; }</script></html>
一向如此任性，從不解釋為什麼，為什嗎？這是去年的代碼，所以，我也忘了……
請看第二題：
今天一個辭職很久的前端姐姐問我一個在ios safari瀏覽器中為什麼我的css為position：fixed的header居然被軟鍵盤乾沒了。
於是我花了將近半小時，借了一部傳說中的5s開始了實驗。
於是，請看源碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>因為愛情</title> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"> <style type="text/css">body{position:relative} header{position:fixed;top:0;left:0;background:yellow;} main{height:500px;overflow:scroll} </style></head><body><header id=‘head‘>我就是驕傲的頭部！我不動！</header><main style=‘‘><div style=‘background:red;height:300px;‘></div><div style=‘background:green;height:300px;‘></div></main><footer><input type="text" value=‘我就在這裡‘ id=‘input‘/></footer></body><script type="text/javascript" src=‘https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js‘></script><script type="text/javascript">$(‘#input‘).on(‘focus‘,function(){ $("#head").css("position", "absolute");window.onscroll=function(){var top = $(document).scrollTop(); $("#head").css("top",top);}/* setTimeout(function(){},1500) */}).on(‘blur‘,function(){$(‘header‘).css({"position":"fixed",‘top‘:0,‘left‘:0})})</script></html>
因為是剛剛寫的，所以我有話說：
首先百度了也google了。發現是蘋果的bug，這個bug沒啥好解釋的，比較噁心就是了，他的軟鍵盤在input擷取焦點後彈起，然後就將我的"position":"fixed",硬生生掰成了"position", "absolute"；這讓我這個直男怎麼可以接受！
你這個樣子，我只好將計就計了。
於是我就發現了捲軸高度，然後做一個捲軸監聽事件，然後這樣平滑的解決了header被頂出去的bug。當然，失去焦點的時候，我們的fixed還是可以正常使用的。
嗯，就這樣，我是宋宇，如果不小心協助到了你，我很榮幸。
ios safari input fixed 軟鍵盤裡的愛恨情仇
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
