业务中在一定场景中会将input 设置为只读状态,在IOS safari上当input 输入框focus 时,仍会出现键盘上的上下箭头,这种用户体验非常不好,如何干掉呢?

<input readonly="readonly"/>

说一下思路:

上下箭头是无法通过 设置html属性,meta标签或者监听事件来解决,因为这些箭头并没有可以监听它的事件。而这些箭头的本意是让用户在上下多个input 中自由方便切换。

但是对于输入框的状态是只读时,给用户弹出这样的箭头就不应该了。

唯一的选择是当输入被聚焦时禁用表单中的所有其他输入,因此就不会出现上下切换的选项卡。

具体实施方法是 focus某个input时,对于所选input之外的所有input与textarea元素,添加readobly参数。

对于select元素,添加tabindex=-1参数,使其不在切换列表中。

$(document).ready(function() {
// 判断是否是IOS
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { $('input, textarea').on('focus', function() {
$('input, textarea').not(this).attr("readonly", "readonly")
})
$('input, textarea').on('blur', function() {
$('input, textarea').removeAttr("readonly")
}) $('select').attr('tabindex', '-1')
}
})

IOS系统input输入框为readonly时, 隐藏键盘上的上下箭头的更多相关文章

  1. H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  2. input输入框的readonly属性-----http://www.w3school.com.cn/tags/tag_input.asp

    http://www.w3school.com.cn/tags/tag_input.asp input输入框的readonly属性 查询方法: 1.先找官方的文档,api 2.官方的有看不懂的再百度相 ...

  3. jquery 修改input输入框的 readOnly属性 && input输入框隐藏

    html的代码 <div class="control-group"> <label class="control-label required&quo ...

  4. js控制ios端的input/textarea元素失去焦点时隐藏键盘

    同事在测试产品时发现这样一个:“某些页面击完input框,在点空白处时,iOS设备的键盘不能隐藏并且焦点也不会失去” 带着这个问题我进行了测试,发现在安卓的设备上并没有这种问题出现. 于是写js进行测 ...

  5. IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input

    移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...

  6. Js控制iphone端的input/textarea元素失去焦点时隐藏键盘

    原文http://www.it165.net/pro/html/201404/12672.html function objBlur(obj, time){ if(typeof obj != 'str ...

  7. js判断input输入框为空时遇到的问题 弹窗后,光标没有定位到输入框,而是直接执行我的处理页面程序

    无论是会员注册还是提交订单,我们都要使用到form表单,此时我们在处理数据时,就要判断用户填写的信息.一次是直接通过js判断input输入框是否没有填信息,然后在后台处理文件中通过过滤字符串后再次判断 ...

  8. 怎样使用 CSS 清除 input 输入框聚焦选中时的蓝色边框?

     input 输入框的聚焦选中时的边框是由 outline 属性控制的, 直接使用: input { outline: none } 即可. 如下:

  9. input输入框type=number时的一个缺陷

    本来是在vue里发现获取不到 input[ type="number"]的值,就是输入两个小数点的数值,比如1.1.1,以为是vue的错误,然而不是,vue只做了数字处理 不明白为 ...

随机推荐

  1. CentOS搭建yum源及EPEL仓库

    一.CentOS搭建yum源 1.备份配置文件 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backu ...

  2. LeetCode刷题总结-树篇(下)

    本文讲解有关树的习题中子树问题和新概念定义问题,也是有关树习题的最后一篇总结.前两篇请参考: LeetCode刷题总结-树篇(上) LeetCode刷题总结-树篇(中) 本文共收录9道题,7道中等题, ...

  3. Python基础-day02-1

    判断(if)语句 目标 开发中的应用场景 if 语句体验 if 语句进阶 综合应用 01. 开发中的应用场景 生活中的判断几乎是无所不在的,我们每天都在做各种各样的选择,如果这样?如果那样?-- 程序 ...

  4. 解决Android killer APK 编译失败,无法继续下一步签名

    报错特征   在应用市场上下载了一个APK,使用Androd killer的编译的功能,结果报错了,报错信息如下: > ... 14 more APK 编译失败,无法继续下一步签名! 解决 解决 ...

  5. [Windows] 智慧职教刷课软件(职教雨滴1.9更新完成)

    (智慧职教刷课软件-职教雨滴)支持职教云(云课堂)的课程 2019年10月17日 16:19:57 增加支持资料库,MOOC 点击链接加入群聊[职教雨滴反馈群]:https://jq.qq.com/? ...

  6. Mysql中处理JSON字段

    处理json字段,可以用json_extract函数: select * from (select json_extract(ext_value,'$.high')+0 highx,batch_id ...

  7. Python 的 Geth 封装库 PyGeth

    PyGeth 是一个 Python 封装库,用来作为子进程运行 geth. 系统依赖 该库需要 geth 可执行文件. 安装 pip install py-geth 快速启动 运行连接到 mainne ...

  8. 实战Netty集群

    疯狂创客圈 Java 分布式聊天室[ 亿级流量]实战系列之 -25[ 博客园 总入口 ] 1.写在前面 1.1 实战Netty集群的理由 Java基础练习中,一个重要的实战练习是: java的聊天程序 ...

  9. 牛客国庆训练 H.千万别用树套树

    链接https://ac.nowcoder.com/acm/contest/1108/H 国庆队内训练的题,当时还完全没思路,就没补.现在会树状数组了,倒是能想一想,不过网上题解好多用线段树传数组的? ...

  10. 使用系统定时器SysTick实现精确延时微秒和毫秒函数

    SysTick定时器简介 SysTick定时器是存在于系统内核的一个滴答定时器,只要是ARM Cortex-M0/M3/M4/M7内核的MCU都包含这个定时器,它是一个24位的递减定时器,当计数到 0 ...