关于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 ...
随机推荐
- 使用伪类before和after
.content { padding: 20px } .content::before { content: "我是before添加的内容"; font-weight: bold ...
- Netflix性能监控工具Vector
简介: Vector是Netflix开源的主机级性能监控框架,向每位工程师的浏览器提供精心挑选的高分辨率系统和应用程序指标. 登录到系统并从shell运行大量命令是一种选择,但是通常涉及的复杂性可能成 ...
- python_自定日历
>>> from datetime import date>>> daysOfMonth=[31,28,31,30,31,30,31,31,30,31,30,31] ...
- mysql在ubuntu中的操作笔记(详)
1.安装mysql客户端流程: - 登录navicat官网下载 - 将压缩包拷贝ubuntu中进行解压,解压命令:tar zxvf navicat.tar.gz - 进入解压目录,运行命令./s ...
- js基础进阶--编码实用技巧(二)
我的个人博客:http://www.xiaolongwu.cn 接上篇文章 js编码的实用技巧(一) 5.合理利用||运算符 使用||可以作为参数之外的默认值,当第一个参数返回值为false时,那么第 ...
- MySQL提示“too many connections”的解决办法
今天生产服务器上的MySQL出现了一个不算太陌生的错误"Too many connections".平常碰到这个问题,我基本上是修改/etc/my.cnf的max_connecti ...
- springboot项目利用devtools实现热部署，改动代码自动生效
一.前言 spring-boot-devtools是一个为开发者服务的一个模块,其中最重要的功能就是自动应用代码更改到最新的App上面去.原理是在发现代码有更改之后,重新启动应用,但是速度比手动停止后 ...
- 解决openfire中发送某些特殊字符会断开xmpp连接的问题
在openfire中,如果发送某些特殊的字符(例如一些表情符合),会断开xmpp的连接,经查,是由以下的代码问题引起的: src\java\org\jivesoftware\openfire\net\ ...
- 玩转Spring MVC(二)----MVC框架
早期程序员在编写代码时是没有一个规范的,系统的业务逻辑和数据库的访问时混合在一起的,不仅增加了大量的重复工作,而且增加了后期维护的难度. 后来,人们逐渐发现某些通用的功能是可以单独的封装起来的,这样就 ...
- python中RabbitMQ的使用（安装和简单教程）
1,简介 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现的产品,RabbitMQ是一个消息代理,从"生产者"接收消息 ...