ios端的Safari浏览器中,输入框加入readonly之后,点击还能获取焦点的解决办法。
事情的起因是,新增一个需求,原来的输入框点击不要出现系统自带的键盘,出现我们模拟的键盘。如果是一次性开发的话, 我肯定把这个输入框写成一个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之后,点击还能获取焦点的解决办法。的更多相关文章
- 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...
- javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题
我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...
- IOS内置safari浏览器日期字符串转Date对象失败
代码示例: <html> <head> <title>Date字符串转化示例</title> </head> <body> &l ...
- IE与safari浏览器中时间格式问题
一.问题内容 在js中处理Date时,发现IE与Safari和其他浏览器的支持方式不一致 1.例如:2017-01-01 12:00:00 在其他浏览器中,使用这个格式的字符串进行new Date操作 ...
- IOS 开发中 Whose view is not in the window hierarchy 错误的解决办法
在 IOS 开发当中经常碰到 whose view is not in the window hierarchy 的错误,该错误简单的说,是由于 "ViewController" ...
- 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)
最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...
- 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法
手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法 最近碰到Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机 ...
- eclipse项目中关于导入的项目里提示HttpServletRequest 不能引用的解决办法
eclipse项目中关于导入的项目里提示HttpServletRequest 不能引用的解决办法 当使用eclipse导入外部的web工程时,有时会提示HttpServletRequest, Serv ...
- 向SDE图层中添加大量数据时,出现ORA-00604以及ORA-01000的解决办法
转自原文 向SDE图层中添加大量数据时,出现ORA-00604以及ORA-01000的解决办法 写了一个小程序,从一个列表中读取坐标串,每个坐标串生成一个IPolygon,然后将这些Polygon添加 ...
随机推荐
- Linux服务器之间进行文件目录映射/挂载(总结)
Linux服务器之间进行文件目录映射/挂载(总结) 需要实现的功能为:将192.168.10.10服务器下的 /home/要映射的目录/ ,映射为192.168.10.90服务器下的 /home/被映 ...
- MyEclipse最新版-版本更新说明及下载 - MyEclipse官方中文网
http://www.myeclipsecn.com/learningcenter/myeclipse-update/ [重要更新]MyEclipse 2015正式版发布 [重要更新]MyEclips ...
- java中的堆,栈和方法区(转)
来源:https://www.cnblogs.com/iliuyuet/p/5603618.html https://blog.csdn.net/lin542405822/article/detail ...
- [Swift]LeetCode944. 删除列以使之有序 | Delete Columns to Make Sorted
We are given an array A of N lowercase letter strings, all of the same length. Now, we may choose an ...
- Java中 Linux下安装Redis
1.连接上虚拟机之后,选择/usr/local目录,将redis-4.0.6.tar.gz放入/usr/local目录. 1.1:使用Xftp将redis-4.0.6.tar.gz放入/usr/loc ...
- 机器学习入门 - Google机器学习速成课程 - 笔记汇总
机器学习入门 - Google机器学习速成课程 https://www.cnblogs.com/anliven/p/6107783.html MLCC简介 前提条件和准备工作 完成课程的下一步 机器学 ...
- 关于video标签移动端开发遇到的问题,获取视频第一帧,全屏,自动播放,自适应等问题
最近一直在处理video标签在IOS和Android端的兼容问题,其中遇到不少坑,绝大多数问题已经解决,下面是处理问题经验的总结: 1.获取视频的第一帧作为背景图: 技术:canvas绘图 windo ...
- Python档案袋(列表、元组、字典、集合 )
列表 可以同名,有序(通过下标可找到) 取值: 1 #声明列表 2 listx=["L0","L1","L2",33,"L4&qu ...
- 用Flutter开发的跨平台项目,完美运行在Android和IOS上,Material简洁风格,包括启动页、引导页、注册、登录、首页、体系、公众号、导航、项目,还有漂亮的妹子图库,运行极度流畅,结构清晰,代码规范,值得拥有
Flutter学习资源汇总持续更新中...... Flutter官方网站 Flutter中文网 wendux的Flutter实战 Flutter官方exampleflutter_gallery 阿里巴 ...
- 3.MySQL(三)
索引类型 先创建表 mysql> CREATE TABLE test( -> id INT, -> username VARCHAR(16), -> city VARCHAR( ...