业务中在一定场景中会将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. 如何上传项目到github

    喜欢的同学可以看一下原文,讲得更加详细哦 原文地址:http://www.cnblogs.com/cxk1995/p/5800196.html 首先你需要一个github账号,所有还没有的话先去注册吧 ...

  2. intellij cpu占有高解决办法(亲测有效!)

    File---Settings---Inspections---把勾都去掉或者选自己需要的部分.

  3. Node6-1单元测试mocha

    1.初步简单的测试 在src新建一个math.js的文件.src/math.js module.exports ={ add:(...args)=>{ return args.reduce((p ...

  4. 张亦总结《AG百家乐庄闲,龙虎中下三路技巧和三株路的运用》

    ​​关于三珠路的各种打法,这里我做个详细的讲解 三珠路的打法源于澳门赌王叶汉,需要了解赌王叶汉的著作<BJL投注公式>的可以加我Q:<10353581>进行详细解答 叶汉的打法 ...

  5. 【CV现状-2】三维感知

    #磨染的初心--计算机视觉的现状 [这一系列文章是关于计算机视觉的反思,希望能引起一些人的共鸣.可以随意传播,随意喷.所涉及的内容过多,将按如下内容划分章节.已经完成的会逐渐加上链接.] 缘起 三维感 ...

  6. Linux-3.14.12内存管理笔记【伙伴管理算法(4)】

    此处承接前面未深入分析的页面释放部分,主要详细分析伙伴管理算法中页面释放的实现.页面释放的函数入口是__free_page(),其实则是一个宏定义. 具体实现: [file:/include/linu ...

  7. Path Manipulation 路径操作

  8. ElementUI table 点击编辑按钮进行编辑实现示例

    <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta nam ...

  9. WPF 3D 球面导览

    基于WPF的3D Sphere实现模式,升级实现了该3D导览Demo.先pose一张demo效果图 所有顶点的坐标来源于足球的顶点.足球整个球面完全由正五边形和正六边形拼成,每条拼缝的长度一致,故知道 ...

  10. Docker 私服Registry简介与使用Docker-Compose安装Registry

    场景 Docker-Compose简介与Ubuntu Server 上安装Compose: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...