input输入框光标,光标的高度和父盒子的高度一样,而android手机没问题
android
ios
通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),当点击输入的时候,光标的高度就自动和父盒子的高度一样了。(谷歌浏览器的设计原则,还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值,当有内容时,光标从input的顶端到文字的底部
padding 去替换 line-height
.content { box-sizing: border-box; height: 88px; .content-input { display: block;//块元素 box-sizing: border-box;//怪异盒模型 width: 100%; font-size: 28px; //line-height: 88px; padding: 30px 0; } }
在ios端,上下滑动页面时,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况,例如下图,右图是正常页面,边是ios上下滑动后,卡顿导致如左图下面部分丢失。
微信浏览器的内核,Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。
在需要滑动的位置加上如下css代码:
overflow:scroll;
-webkit-overflow-scrolling:touch;
1、在滑动界面之中使用的position:fixed 无法固定下来,会随着界面进行一起滚动
解决方法:将使用的position:fixed(头部导航)写在滑动部位外部,在使用绝对定位进行布局,以此解决问题
2、vue中使用v-if导致的界面初始化之后无法滑动
解决方法:将v-if改成v-show进行展示,解决界面进入之后第一次不能滑动的问题
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文
输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑
固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 。
<input class="content-input" placeholder="请输入姓名" v-model="peopleList.name" @blur.prevent="changeBlur()" />
changeBlur(){ let u = navigator.userAgent, app = navigator.appVersion; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isIOS){ setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 200) } }
prevent: 阻止默认事件
blur: 失去焦点
position:fixed 的元素在ios里,收起键盘的时候会被顶上去,特别是第三方键盘
iOS嵌套界面之后,界面点击效果会自动产生一个300毫秒的延时
1、下载fastclick npm i -S fastclick 2、引入 FastClick.attach(document.body);
引入fastclick之后,会有一个副作用:input输入框需要连续点击两次或者长按才能获取焦点
再引入fastClick的js中加入如下代码即可解决input输入框点击不能获取焦点的问题
FastClick.prototype.focus = (deviceIsIOS&& targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 &&!== 'time' && targetElement.type !== 'month'=
前端界面使用new Date('2021-3-14 23:59:59').getTime(),iOS不解析。
换用其他格式:new Date('2021-3-14T23:59:59').getTime()
前端有时候需要用到拷贝部分内容到剪切板中,但是在使用时发现,部分网上提供的拷贝方法在Android中正常使用,但是在iOS中无法进行拷贝,经过试验发现一种通用的拷贝方法,如下:
/** * 将内容拷贝到剪切板中*/function copyContent(message) { // text: 要复制的内容, callback: 回调 var input = document.createElement("input"); input.value = message; document.body.appendChild(input); input.select(); input.setSelectionRange(0, input.value.length); document.execCommand('Copy'); document.body.removeChild(input); }
给input和textarea标签添加focus事件
先判断是不是安卓手机下的操作,当然,可以不用判断机型,Document 对象属性和方法,setTimeout延时0.5秒,因为调用安卓键盘有一点迟钝,导致如果不延时处理的话,滚动就失效了
changefocus(){ let u = navigator.userAgent, app = navigator.appVersion; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; if(isAndroid){ setTimeout(function() { document.activeElement.scrollIntoViewIfNeeded(); document.activeElement.scrollIntoView(); }, 500); } },
联系客服