关于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 ...
随机推荐
- vue组件的生命周期
先来张组件生命周期的示意图: 文档里是这样描述的:你不需要立马弄明白所有的东西,不过以后它会有帮助.传送门. Vue2.0的生命周期钩子一共有10个,同样结合官方文档作出了下表 生命周期钩子 详细 b ...
- python_方法说明
方法用来描述对象所具有的行为,例如,列表对象的追加元素.插入元素.删除原宿.排序,字符串对象的分隔.连接.排版.替换.烤箱的温度设置.烘烤,等等 在类中定义的方法可以粗略分为四大类:公有方法.私有方法 ...
- Windows安装TensorFlow
1.下载安装Anaconda 官方地址:https://www.continuum.io/downloads/镜像地址:https://mirrors.tuna.tsinghua.edu.cn/ana ...
- PAT1017:Queueing at Bank
1017. Queueing at Bank (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Supp ...
- SSM-Spring-10：Spring中cglib动态代理
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 何为动态代理,就不扯皮了,上一篇博客刚刚提到,那cglib动态代理又怎么写,我拿个和上个例子相似的案例来写 具 ...
- DOS系统常用命令
前言: DOS命令是DOS操作系统使用的命令.DOS操作系统是一种磁盘操作系统,从Windows95.98到今天的Windows10都内置有DOS操作系统.可以通过"win+R", ...
- 使用Ratpack与Spring Boot构建高性能JVM微服务
在微服务天堂中Ratpack和Spring Boot是天造地设的一对.它们都是以开发者为中心的运行于JVM之上的web框架,侧重于生产率.效率以及轻量级部署.他们在服务程序的开发中带来了各自的好处.R ...
- SVN学习之windows下svn的安装
svn是apache的一个开源项目,全称为subversion.是一个基于版本的项目管理软件,一般在多人开发的项目中使用,目前svn已经替代了原来的cvs.大多数情况下,svn服务安装在linux服务 ...
- python3[爬虫实战] 使用selenium，xpath爬取京东手机
使用selenium ,可能感觉用的并不是很深刻吧,可能是用scrapy用多了的缘故吧.不过selenium确实强大,很多反爬虫的都可以用selenium来解决掉吧. 思路: 入口: 关键字搜索入口 ...
- Java中存取权限和修饰符public、private、protected和default的区别和联系
java中有4种存取权限和对应的修饰符(从限制最少的开始列出),主要作用如下: 1.public权限最大,代表任何程序代码都可以存取的公开事物(类.变量.方法.构造函数等).它往往用于对外的情况,也就 ...