input框在ios和android的适配问题

问题1:input框获取焦点弹出键盘后iOS无法输入文字

  解决:css中加上   -webkit-user-select:text !important;

  

问题2: 获取焦点时的光标IOS颜色和输入文字颜色不一致

  解决:手动设置颜色:caret-color: #952BF7;

  

问题3: input框获取焦点时,IOS手机页面被键盘抬起,键盘落下后,页面未回弹

  解决:在input框失去焦点时,调用window.scrollTo方法手动将页面滚回原来的位置,这里以vue项目为例

  

问题4: 当底部有吸底条,即绝对定位的按钮时,input框获取焦点键盘被抬起的同时android会将吸底条抬到键盘之上,用户体验不好,这里以vue为例(参考别人的文章最后解决了,记不清是哪位大佬的,感谢)

  解决:用一个变量控制吸底条的显示隐藏,在页面打开时设置实时屏幕高度。 动态监听页面高度隐藏,原理时在键盘抬起时隐藏吸底条,键盘落下时恢复吸底条,以达到目的

  

  在data中获取高度

  

  

  动态监听页面高度变化

  

  

  

  

原文地址:https://www.cnblogs.com/unrestrained/p/10986706.html

时间: 2024-10-07 19:07:02

input框在ios和android的适配问题的相关文章

mui的input框在IOS系统下无法聚焦或点击多次才能聚焦

我在给公司的一个H5页面添加搜索框,前端原先就用的mui,正常添加input框后,手机测试出现了问题: Android : input框有内容搜索跳转后,按返回键,input不能聚焦,键盘不弹出 IOS : 正常进入页面input框不能聚焦,键盘不弹出,多次点击可能会聚焦 代码如下: <div> <a class="mui-btn mui-btn-link" style="float: right;width: 14.5%;height: 34px;&quo

ios和android适配

一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发 解决方案:css增加cursor:pointer; 三星手机遮罩层下的input.select.a等元素可以被点击和focus(点击穿透) 问题发现于三星手机,这个在特定需求下才会有,因此如果没有类似问题的可以不看.首先需求是浮层操作,在三星上被遮罩的元素依然可以获取focus.click.change),有两种解决方案: 1.是通过层显示以后加入对应的class名控制,截断显示层下方可获取焦点元素的事件获取

【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)

在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头 第一,首先想到额就是在VUX-UI中制定type=number.--不可行 VUX中的文档和代码说明,type=number不支持maxLength,会报错,而且没有正则替换的处理或者钩子函数,只有输入后提示校验信息. 第二,基于VUX中XInput封装,有如下问题 1)两层v-model,正则替换的值不会触发input框渲染 解决:currentV

HTML5会砸掉iOS和Android的饭碗么?

我们第一次谈论HTML5要改变世界大概是因为乔布斯,他坚持在iOS上不兼容Flash,在Adobe统治多媒体开发的那个年代,这需要付出极大的勇气.这么多年过去了,虽然所有人都在谈论HTML5,但是大部分人甚至都忘了它还是一个仍在完善中的体系. 2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式定稿.接下来,HTML5将真正开始颠覆原生 (Native) App 世界.虽然这种危言耸听已经让人有点厌烦.但是如果回顾HTML这些年走过的路,你就不会再怀疑

HTML 5 会让iOS和Android开发者转行吗?

我们第一次谈论 HTML5 要改变世界大概是因为乔布斯,他坚持在 iOS 上不兼容 Flash,在 Adobe 统治多媒体开发的那个年代,这需要付出极大的勇气.这么多年过去了,虽然所有人都在谈论 HTML5,但是大部分人甚至都忘了它还是一个仍在完善中的体系. 2007年W3C(万维网联盟)立项 HTML5,直至 2014年10月 底,这个长达八年的规范终于正式定稿.接下来,HTML5 将真正开始颠覆原生(Native) App 世界.虽然这种危言耸听已经让人有点厌烦.但是如果回顾 HTML 这些

html5图片上传时IOS和Android均显示摄像头拍照和图片选择

最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料,改为<input type="file" capture="camera">后,Android可显示相机和文档,但IOS则只有拍照选项了,最后通过判断设备类型使在IOS和Android下均可以显示拍照和图库选择,代码如下: var u = navigator.u

【转】Android屏幕适配全攻略(最权威的官方适配指导)

Android的屏幕适配一直以来都在折磨着我们这些开发者,本篇文章以Google的官方文档为基础,全面而深入的讲解了Android屏幕适配的原因.重要概念.解决方案及最佳实践,我相信如果你能认真的学习本文,对于Android的屏幕适配,你将有所收获! Android屏幕适配出现的原因 重要概念 屏幕尺寸 屏幕分辨率 屏幕像素密度 dpdipdpisppx mdpihdpixdpixxdpi 解决方案 支持各种屏幕尺寸 使用wrap_contentmatch_parentweight 使用相对布局

Android屏幕适配全攻略(最权威的官方适配指导)

Android屏幕适配出现的原因 在我们学习如何进行屏幕适配之前,我们需要先了解下为什么Android需要进行屏幕适配. 由于Android系统的开放性,任何用户.开发者.OEM厂商.运营商都可以对Android进行定制,修改成他们想要的样子. 但是这种"碎片化"到底到达什么程度呢? 在2012年,OpenSignalMaps(以下简称OSM)发布了第一份Android碎片化报告,统计数据表明, 2012年,支持Android的设备共有3997种. 2013年,支持Android的设备

Android屏幕适配全攻略(最权威的Google官方适配指导)

Android的屏幕适配一直以来都在折磨着我们这些开发者,本篇文章以Google的官方文档为基础,全面而深入的讲解了Android屏幕适配的原因.重要概念.解决方案及最佳实践,我相信如果你能认真的学习本文,对于Android的屏幕适配,你将有所收获! 出处:http://blog.csdn.net/zhaokaiqiang1992 Android屏幕适配出现的原因 重要概念 屏幕尺寸 屏幕分辨率 屏幕像素密度 dpdipdpisppx mdpihdpixdpixxdpi 解决方案 支持各种屏幕尺