1、ios移动端 软键盘收起后,页面内容被顶上去,不下滑回原处
代码如下:
$(function(){ $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function(){ window.scroll(0,0); }); })
原理就是弹起键盘的时候,window.scrollY会从0变到键盘的高度(例如:200),当输入框焦点失去后让scrollY回到0就好了。
但是有一个很严重的问题:如果页面上有按钮需要操作 ,例如,评论的输入框+发布按钮,输入完文字,点击“发布”,触发click事件的时候,会导致页面先触发blur事件,键盘回落,然后一切就结束了。。。。按钮点击没有起任何作用。
解决方案: 把click事件更换成ontouchstart 可以解决这个问题。 ontouchstart 事件优于click事件触发。
2、移动端 input,按钮等样式在安卓与ios上不同的解决方案
input,select,button{ -webkit-appearance:none; appearance:none;}
去掉 IOS默认样式即可
3、IOS上下拉动滚动条时卡顿、慢
body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch;}
4、ios页面拖动问题
body {/* 当手指从触摸屏上移开,滚动会立即停止 */ -webkit-overflow-scrolling: auto overflow-scrolling: auto}
5、iphone及ipad下输入框默认内阴影
-webkit-appearance: none;
6、日期问题
对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别。
时间格式化的时候,在浏览器端处理好好的,到了手机端,就变成NAN,或者null,这种情况,是ios系统不能转化这种类型的时间。
let date = new Date('2019-02-28 18:33:24'); // null
解决方案:转成 yyyy/mm/dd hh:mm:ss 这种格式就可以了。
replace(/-/g, "/")
7、ios在微信小程序的webview,键盘收回,页面底部会留白
这个问题怀疑是页面的scroll设置了auto导致的。
解决思路:
复现该bug以后发现只要滚动一下页面就可以使页面恢复正常,于是就想可不可以在input失去焦点以后调用一下页面滚动,来完成该操作,发现果然可以。然后就产生了如下代码
temporaryRepair(){ var currentPosition,timer; var speed=1;//页面滚动距离 timer=setInterval(function(){ currentPosition=document.documentElement.scrollTop || document.body.scrollTop; currentPosition-=speed; window.scrollTo(0,currentPosition);//页面向上滚动 currentPosition+=speed; //speed变量 window.scrollTo(0,currentPosition);//页面向下滚动 clearInterval(timer); },1);
8、iphone fixed 失效,导致一些机器上textarea光标偏移
解决方案: 所有兄弟元素变成absolute, 父元素overflow:auto。
父元素{height: 100vh;position: relative;overflow: auto;}兄弟元素{position: absolute;top: 0;bottom: 0;left: 0;right: 0;overflow-x: visible;overflow-y: auto;padding-bottom: 10px;z-index: 1;}
输入框如果使用了fixed固定在底部,键盘顶起的时候,iphone上fixed会失效,导致页面滚动输入框会随着页面滚动,并且在部分机型上,输入框偶尔会被键盘遮挡,这种偶现的问题,很不友好。
解决方案: 放弃使用fixed布局,页面如果有滚动,也放弃absolute,如果强行要使用absolute,请参考上一条光标偏移。建议使用flex布局,兼容性会得到解决。
当然,如果遇到以上这些问题,说明产品设计就很不合理,如果必要的话,还是要更换设计,改成input不需要被键盘顶起的设计,这些兼容性的解决方案,也不并不能完美的解决所有机型的问题。
-webkit-tap-highlight-color:rgba(255,255,255,0)
11、顶部状态栏背景色
说明:
除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。
如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank-translucent,则状态栏显示为黑色半透明。
如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。
如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。
默认值是default。
问题是这样的,用input search做模糊搜索的时候,在键盘里面输入关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进行关键词标红。
用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!
解决办法:
可以用html5的oninput事件去代替keyup,然后就达到类似keyup的效果!