关于ios的光标和键盘回弹问题
最近再做项目的时候（移动端），遇到了两个小问题，一个是ios端键盘不回弹的问题（微信浏览器），另一个是ios输入光标位置问题。首先看第二个问题：
就是点击一个按钮，要把输入框里面原来的内容加上一些固定的内容，然后一起输出到输入框。本来这个需求是很简单的，但是遇到一个问题，就是点击玩这个按钮之后，ios端的光标在输入框的最前面，体验不是很友好。请看下面的代码，这个就是我最开始写的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<p>测试ios端光标在表情之前的问题</p>
<textarea name="" rows="" cols="">123</textarea>
<button>获取焦点</button>
</body>
<script type="text/javascript">
var btn = document.getElementsByTagName("button")[0];
var txt = document.getElementsByTagName("textarea")[0];
btn.onclick = function(){ txt.value = txt.value + "456";
txt.focus();
}
</script>
</html>
其中18行是获取原来里面的值，然后拼接上最新的值，然后让输入框获取焦点，这个时候ios 的光标就在输入框的最前面。大家可以找个ios测试一下，我截图没有截到光标；安卓是没有问题的
这样的体验显然是不能达到需求的，所以去网上找了一下，发现只要把18行和19行的代码互换位置，这样就可以了。这个我也是不是很明白，这个时候Android和ios都是可以的，真的很神奇，而且解释不通。
另一个问题是有的ios版本，当弹出输入法输入完成之后，键盘回去了，但是页面没有返回。这个时候就需要在输入框中失去焦点的情况下，调用一个函数，我把函数放在下面：
/*ios键盘回弹**********************************************/
function kickBack() {
//alert("是去焦点了");
setTimeout(() => {
window.scrollTo(0, document.body.scrollTop + 1);
document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1);
}, 10)
}
/*ios键盘回弹end**************************************/
最后再说一下关于ios的css兼容问题，就是我在设置背景的时候，我是用的rgb来设置颜色，但是因为编辑器的原因，他给我多了一个a，成了rgba（），最后一个是背景透明。但是在ios端是不可以的，他执行到这一句话的时候，是会报错的。这次记录下来，给自己提个醒。
关于ios的光标和键盘回弹问题的更多相关文章
- iOS 开发之 - 关闭键盘 退出键盘 的5种方式
iOS 开发之 - 关闭键盘 退出键盘 的5种方式 1.点击编辑区以外的地方(UIView) 2.点击编辑区域以外的地方(UIControl) 3.使用制作收起键盘的按钮 4.使用判断输入字元 5 ...
- iOS开发自己定义键盘回车键Return Key
在iOS开发中.用户在进行文本输入的时候,往往会用到虚拟键盘上的回车键,也就是Return Key.回车键有时候能够是"完毕"(表示输入结束).能够是"下一项" ...
- iOS Android中 h5键盘遮挡输入框的问题和解决方案
问题发现:在 Android 部分机型 和 iOS部分系统下 键盘会出现遮挡输入框的情况(壳内).问题解决: Android 经过测试,Android 的6.0版本以上均会出现改问题,归根到底是之前的 ...
- ios11，弹出层内的input框光标错位 键盘弹出时，输入信息，光标一直乱跳
之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...
- iOS 自定义emoji表情键盘
之前走了很多弯路,包括自己定以emoji表情,自己创建view类去处理图文混排 ,当把这些焦头烂额的东西处理完了才发现 ,其实系统自带键盘是如此的方便,iOS 系统自带的表情在view,textfie ...
- ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。
首先看一下我要解决的问题,第一张图是正常的情况下,第二张图是点击了输入框之后的情况,就是要解决此问题~! 百度了一下解决方法,好像有以下的一些方法: 1. iscroll 2. Jquery Mobi ...
- iOS中监控软键盘显示或隐藏的可靠方法
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 如果你试图在软键盘的显示或隐藏时去改变的UI界面结构,仅有的方 ...
- web中ios移动端软键盘收起后，页面内容留白不下滑
微信里面打开web页面,在ios软键盘收起时,页面键盘位置的内容留白,如下图 这个问题纠结了很久,然后请教了老大(威哥),看到页面老大给出的方案就是代码改变滚动条的位置. 这里就监听键盘收起的事件,来 ...
- 解决 插件LArea 在IOS上浮出软键盘问题
移动端使用 省市县城市选择三级联动的时候, 插件LArea 会有一个问题 ios浏览器和ie9已下(包括ie9)浏览器都有input设置readonly之后input还有聚焦的问题. ios inpu ...
随机推荐
- POJ 2411 解题报告
传送门:http://poj.org/problem?id=2411 题目简述 有一个\(W\)行\(H\)列的广场,需要用\(1*2\)小砖铺满,小砖之间互相不能重叠,问 有多少种不同的铺法? 输入 ...
- Design5：SQL Server 文件和文件组
数据库是数据的仓库,用于存储数据,而存储数据需要媒介,现在的存储媒介,最常用的是硬盘,土豪一点的服务器使用固态硬盘(SSD),特殊用途的服务器使用内存.数据库最常用的存储文件是数据文件和日志文件,数据 ...
- 记录几个经典的字符串hash算法
记录几个经典的字符串hash算法,方便以后查看: 推荐一篇文章: http://www.partow.net/programming/hashfunctions/# (1)暴雪字符串hash #inc ...
- eclipse换了高版本的maven插件后报错：org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project
在给eclipse换了高版本的maven插件后,引入jar包报如下的错误: org.apache.maven.archiver.MavenArchiver.getManifest(org.apach ...
- mysql用户链接数
show status like 'Threads_connected'; 当前连接数 show variables like '%max_connections%'; 最大链接数 set GLOB ...
- MongoDB的基本操作（一）
一.简介 mongodb是是由C++语言编写的一个基于分布式文件存储的开源nosql数据库系统,支持文档和键值存储模型,拥有灵活的数据模型.可靠的性能,以及自动的吞吐容 量扩展功能. ...
- SVN学习之windows下svn的安装
svn是apache的一个开源项目,全称为subversion.是一个基于版本的项目管理软件,一般在多人开发的项目中使用,目前svn已经替代了原来的cvs.大多数情况下,svn服务安装在linux服务 ...
- C++雾中风景9:emplace_back与可变长模板
C++11的版本在vector容器添加了emplace_back方法,相对于原先的push_back方法能够在一定程度上提升vector容器的表现性能.所以我们从STL源码角度来切入,看看这两种方法有 ...
- python运行js
安装 pip install PyExecJS # 需要注意, 包的名称:PyExecJS 简单使用 import execjs execjs.eval("new Date") 返 ...
- 转载：python + requests实现的接口自动化框架详细教程
转自https://my.oschina.net/u/3041656/blog/820023 摘要: python + requests实现的接口自动化框架详细教程 前段时间由于公司测试方向的转型,由 ...