事情的起因是，新增一个需求，原来的输入框点击不要出现系统自带的键盘，出现我们模拟的键盘。如果是一次性开发的话， 我肯定把这个输入框写成一个div或者其他的元素，然后点击之后出现我们的模拟键盘，这样就不会遇到input输入框的问题了。但是因为第一版的时候，就是调起的系统的输入法，所以这里就写的是一个input，所以我就在这个input中增加了一个readonly属性。结果测试的时候发现，在ios端有小问题，就是虽然没有弹起系统的键盘，但是还是能获取焦点，而且下面出现了一小条，左面是一个上下的箭头，右面是完成(Done)按钮。一般其实也没什么的，但是我们的键盘是用的fixed定位写的，这样会遮住其中的一部分，所以，就需要解决这个问题，两种私聊。
一种是当出现这个的时候，我们模拟的键盘重新定位，这种想想就觉得麻烦。
另外的一种就是给ios的浏览器去掉这个bug。废话不多说，先看代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
7
8 </head>
9 <body>
10 <h2>测试ios浏览器下 input输入框设置了readonly之后，点击输入框还是弹出一小块区域</h2>
11 <h6 style="color: royalblue;">左面是一个上下的箭头，右边是是一个"完成(Done)"</h6>
12 <input type="text" readonly="readonly" name="" id="" value="啥也没有" />
13 <p>第一个，这个什么属性也没加，只有一个readonly</p>
14 <input type="text" readonly="readonly" unselectable="on" name="" id="" value="只有unselectable='on'" />
15 <p>第二个，加入了一个'unselectable="on"'这个属性，发现还是不行的</p>
16 <input type="text" readonly="readonly" unselectable="on" onfocus="this.blur()" name="" id="" value="这个都有" />
17 <p>第三个，把'unselectable="on"'和'onfocus="this.blur()"'这个属性都加上了，这样就可以了。页面终于安静了！！！</p>
18 <button>点我</button>
19 </body>
20 <script type="text/javascript">
21 var but = document.getElementsByTagName("button")[0];
22 but.onclick = function(){
23 document.getElementsByTagName("input")[2].value = 111111111;
24 }
25 document.getElementsByTagName("input")[2].onclick = function (){
26 alert(1111111);
27 }
28 </script>
29 </html>
这里就是做个记录。
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
