事情的起因是，新增一个需求，原来的输入框点击不要出现系统自带的键盘，出现我们模拟的键盘。如果是一次性开发的话， 我肯定把这个输入框写成一个div或者其他的元素，然后点击之后出现我们的模拟键盘，这样就不会遇到input输入框的问题了。但是因为第一版的时候，就是调起的系统的输入法，所以这里就写的是一个input，所以我就在这个input中增加了一个readonly属性。结果测试的时候发现，在ios端有小问题，就是虽然没有弹起系统的键盘，但是还是能获取焦点，而且下面出现了一小条，左面是一个上下的箭头，右面是完成(Done)按钮。一般其实也没什么的，但是我们的键盘是用的fixed定位写的，这样会遮住其中的一部分，所以，就需要解决这个问题，两种私聊。

　　一种是当出现这个的时候，我们模拟的键盘重新定位，这种想想就觉得麻烦。

　　另外的一种就是给ios的浏览器去掉这个bug。废话不多说，先看代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />

     </head>

     <body>

         <h2>测试ios浏览器下 input输入框设置了readonly之后，点击输入框还是弹出一小块区域</h2>

         <h6 style="color: royalblue;">左面是一个上下的箭头，右边是是一个"完成（Done）"</h6>

         <input type="text" readonly="readonly"  name="" id="" value="啥也没有" />

         <p>第一个，这个什么属性也没加，只有一个readonly</p>

         <input type="text" readonly="readonly" unselectable="on" name="" id="" value="只有unselectable='on'" />

         <p>第二个，加入了一个'unselectable="on"'这个属性，发现还是不行的</p>

         <input type="text" readonly="readonly" unselectable="on" onfocus="this.blur()" name="" id="" value="这个都有" />

         <p>第三个，把'unselectable="on"'和'onfocus="this.blur()"'这个属性都加上了，这样就可以了。页面终于安静了！！！</p>

         <button>点我</button>

     </body>

     <script type="text/javascript">

         var but = document.getElementsByTagName("button")[0];

         but.onclick = function(){

             document.getElementsByTagName("input")[2].value = 111111111;

         }

         document.getElementsByTagName("input")[2].onclick = function (){

             alert(1111111);

         }

     </script>

 </html>

　　这里就是做个记录。

ios端的Safari浏览器中，输入框加入readonly之后，点击还能获取焦点的解决办法。的更多相关文章

  1. 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

    前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...

  2. javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题

    我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...

  3. IOS内置safari浏览器日期字符串转Date对象失败

    代码示例: <html> <head> <title>Date字符串转化示例</title> </head> <body> &l ...

  4. IE与safari浏览器中时间格式问题

    一.问题内容 在js中处理Date时,发现IE与Safari和其他浏览器的支持方式不一致 1.例如:2017-01-01 12:00:00 在其他浏览器中,使用这个格式的字符串进行new Date操作 ...

  5. IOS 开发中 Whose view is not in the window hierarchy 错误的解决办法

    在 IOS 开发当中经常碰到 whose view is not in the window hierarchy 的错误,该错误简单的说,是由于 "ViewController" ...

  6. 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法（转）

    最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...

  7. 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法

    手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法 最近碰到Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机 ...

  8. eclipse项目中关于导入的项目里提示HttpServletRequest 不能引用的解决办法

    eclipse项目中关于导入的项目里提示HttpServletRequest 不能引用的解决办法 当使用eclipse导入外部的web工程时,有时会提示HttpServletRequest, Serv ...

  9. 向SDE图层中添加大量数据时，出现ORA-00604以及ORA-01000的解决办法

    转自原文 向SDE图层中添加大量数据时,出现ORA-00604以及ORA-01000的解决办法 写了一个小程序,从一个列表中读取坐标串,每个坐标串生成一个IPolygon,然后将这些Polygon添加 ...

随机推荐

  1. NeuChar 平台使用及开发教程（二）：设置平台账号

    在上一篇<NeuChar 平台使用及开发教程(一):开始使用 NeuChar>中我们了解了 NeuChar 的角色和大体功能框架,并进行了注册,本文将介绍如何设置多账号,以便让 NeuCh ...

  2. 脚本语言丨Batch入门教程第四章：调用与传参

    今天是Batch入门教程的最后一章内容:调用与传参.相信通过前面的学习,大家已经掌握了Windows Batch有关的基础知识和编程方法,以及利用Windows Batch建立初级的编程思维方式.今后 ...

  3. 仿微信的IM聊天时间显示格式(含iOS/Android/Web实现)[图文+源码]

    本文为原创分享,转载请注明出处. 1.引言 即时通讯IM应用中的聊天消息时间显示是个再常见不过的需求,现在都讲究用户体验,所以时间显示再也不能像传统软件一样简单粗地暴显示成“年/月/日 时:分:秒”这 ...

  4. Vue(day1)

    一.起步 <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/v ...

  5. [Swift]LeetCode246.对称数 $ Strobogrammatic Number

    A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...

  6. Spring MVC知识

    f-sm-1. 讲下SpringMvc和Struts1,Struts2的比较的优势 性能上Struts1>SpringMvc>Struts2 开发速度上SpringMvc和Struts2差 ...

  7. AI - TensorFlow - 起步（Start）

    01 - 基本的神经网络结构 输入端--->神经网络(黑盒)--->输出端 输入层:负责接收信息 隐藏层:对输入信息的加工处理 输出层:计算机对这个输入信息的认知 每一层点开都有它相应的内 ...

  8. 基于IPV6的数据包分析（更新拓扑加入了linux主机和抓取133icmp包）（第十三组）

    1.拓扑图 2.配置ipv6地址,在拓扑图上对应位置标有对应网段,所在网段的端口按照网段配置,下图以r4为例 3.配置路由表,由于静态路由还要敲ip很麻烦所以使用ospf协议,下图为ospf配置以r5 ...

  9. Java 11新功能抢先了解

    目前 Oracle 已经发布了 Java Development Kit 10,下个版本 JDK 11 也即将发布.本文介绍 Java 11 的新功能. 根据Oracle新出台的每6个月发布一次Jav ...

  10. 本地连接虚拟机_环境搭建01_VMWARE/XShell/CentOS

    今天起准备搭建一套环境用来学习redis,dubbo,docker,nginx. 环境准备: 1.VMware12:  https://pan.baidu.com/s/1-LnqfrWw8ZjQdmG ...