关于ios的光标和键盘回弹问题

时间 2019-12-09

标签关于 ios 光标键盘回弹问题栏目 iOS 繁體版

原文原文链接

　　最近再作项目的时候（移动端），遇到了两个小问题，一个是ios端键盘不回弹的问题（微信浏览器），另外一个是ios输入光标位置问题。首先看第二个问题：javascript

　　就是点击一个按钮，要把输入框里面原来的内容加上一些固定的内容，而后一块儿输出到输入框。原本这个需求是很简单的，可是遇到一个问题，就是点击玩这个按钮以后，ios端的光标在输入框的最前面，体验不是很友好。请看下面的代码，这个就是我最开始写的css

 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测试一下，我截图没有截到光标；安卓是没有问题的html

　　这样的体验显然是不能达到需求的，因此去网上找了一下，发现只要把18行和19行的代码互换位置，这样就能够了。这个我也是否是很明白，这个时候Android和ios都是能够的，真的很神奇，并且解释不通。java

　　另外一个问题是有的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端是不能够的，他执行到这一句话的时候，是会报错的。此次记录下来，给本身提个醒。浏览器