关于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 ...
随机推荐
- 设计模式的征途—22.中介者（Mediator）模式
我们都用过QQ,它有两种聊天方式:一是私聊,二是群聊.使用QQ群,一个用户就可以向多个用户发送相同的信息和文件,从而无需一一发送,节省大量时间.通过引入群的机制,极大地减少系统中用户之间的两两通信,用 ...
- javascript中的隐式类型转化
javascript中的隐式类型转化 #隐式转换 ## "+" 字符串和数字 如果某个操作数是字符串或者能够通过以下步骤转换为字符串的话,+将进行拼接操作. 如果其中一个操作数是对 ...
- Java NIO Channel通道
原文链接:http://tutorials.jenkov.com/java-nio/channels.html Java NIO Channel通道和流非常相似,主要有以下几点区别: 通道可以读也可以 ...
- Oracle-13：Oracle中的表分区
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客记录了表分区 表分区的含义: 典型的拿空间换时间的案例! 表分区对一张表进行分区,分区之后表中的数据存 ...
- U型理论
- 使用Map标签指定点击区域时的兼容性问题
电商m站的首页,有一个需求是配一张大的banner图,然后指定某些区域是热区,点击之后跳转到不同的活动页. 听起来简单明了,实现也比较容易,立刻就想起来有个map标签,简直就是为这个需求量身定做. 简 ...
- Python sys和shutil模块
# !/user/bin/python # -*- coding: utf-8 -*- import sys # version 获取版本信息 sys.version # maxint 支持的最大in ...
- 复写的Object常用方法
复写的Object常用方法 在Java中Object类是所有类的父类,其中有几个需要override的方法比如equals,hashCode和toString等方法.每次写这几个方法都要做很多重复性的 ...
- fasthttp中的协程池实现
fasthttp中的协程池实现 协程池可以控制并行度,复用协程.fasthttp 比 net/http 效率高很多倍的重要原因,就是利用了协程池.实现并不复杂,我们可以参考他的设计,写出高性能的应用. ...
- 根据http协议下载文件保存到相应的文件下
本实例通过提供的http网址来下载文件,并保存到本地指定的文件下. 本例提供的网址为:http://112.53.80.131:8888/database/11.mdb,下载的文件名为:11.mdb ...