ios端的Safari浏览器中,输入框加入readonly之后,点击还能获取焦点的解决办法。
事情的起因是,新增一个需求,原来的输入框点击不要出现系统自带的键盘,出现我们模拟的键盘。如果是一次性开发的话, 我肯定把这个输入框写成一个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>
这里就是做个记录。