最近再做项目的时候（移动端），遇到了两个小问题，一个是ios端键盘不回弹的问题（微信浏览器），另一个是ios输入光标位置问题。首先看第二个问题：
就是点击一个按钮，要把输入框里面原来的内容加上一些固定的内容，然后一起输出到输入框。本来这个需求是很简单的，但是遇到一个问题，就是点击玩这个按钮之后，ios端的光标在输入框的最前面，体验不是很友好。请看下面的代码，这个就是我最开始写的
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 </head> 8 <body> 9 <p>测试ios端光标在表情之前的问题</p> 10 <textarea name="" rows="" cols="">123</textarea> 11 <button>获取焦点</button> 12 </body> 13 <script type="text/javascript"> 14 var btn = document.getElementsByTagName("button")[0]; 15 var txt = document.getElementsByTagName("textarea")[0]; 16 btn.onclick = function(){ 17 18 txt.value = txt.value + "456"; 19 txt.focus(); 20 } 21 </script> 22 </html>
其中18行是获取原来里面的值，然后拼接上最新的值，然后让输入框获取焦点，这个时候ios 的光标就在输入框的最前面。大家可以找个ios测试一下，我截图没有截到光标；安卓是没有问题的
这样的体验显然是不能达到需求的，所以去网上找了一下，发现只要把18行和19行的代码互换位置，这样就可以了。这个我也是不是很明白，这个时候Android和ios都是可以的，真的很神奇，而且解释不通。
另一个问题是有的ios版本，当弹出输入法输入完成之后，键盘回去了，但是页面没有返回。这个时候就需要在输入框中失去焦点的情况下，调用一个函数，我把函数放在下面：
1 /*ios键盘回弹**********************************************/ 2 function kickBack() { 3 //alert("是去焦点了"); 4 setTimeout(() => { 5 window.scrollTo(0, document.body.scrollTop + 1); 6 document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1); 7 }, 10) 8 } 9 /*ios键盘回弹end**************************************/
最后再说一下关于ios的css兼容问题，就是我在设置背景的时候，我是用的rgb来设置颜色，但是因为编辑器的原因，他给我多了一个a，成了rgba（），最后一个是背景透明。但是在ios端是不可以的，他执行到这一句话的时候，是会报错的。这次记录下来，给自己提个醒。