事情的起因是，新增一个需求，原来的输入框点击不要出现系统自带的键盘，出现我们模拟的键盘。如果是一次性开发的话， 我肯定把这个输入框写成一个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>
这里就是做个记录。