业务中在一定场景中会将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. pipelineDB学习笔记-3. Continuous Transforms (连续转换)

    以下内容为本人根据pipelineDB官网内容进行翻译,如有不妥之处请指正,谢谢大家 Continuous Transforms (连续转换) 一.定义: Continuous Transforms ...

  2. 关于HPS和FPGA之间的桥接学习笔记一

    为了实现FPGA和HPS之间的存储器共享和数据传输,Altera SoC FPGA提供了两种方式用于FPGA和HPS通信.分别是FPGA to SDRAM和AXI bridge. FPGA to SD ...

  3. Caffe源码-Layer类

    Layer类简介 Layer是caffe中搭建网络的基本单元,caffe代码中包含大量Layer基类派生出来的各种各样的层,各自通过虚函数 Forward() 和 Backward() 实现自己的功能 ...

  4. FCC---CSS Flexbox: Use the flex-direction Property to Make a Column

    The last two challenges used the flex-direction property set to row. This property can also create a ...

  5. 【MySQL】LIMIT以及LIMIT OFFSET

    LIMIT两种方法: 两种方法: ()LIMIT A; #表示从第一条记录开始取A条记录: ()LIMIT A,B; #参数A为可选参数,表示跳过A条数据(默认为0) #参数B为必选参数,表示取B行数 ...

  6. MySQL 有关MHA搭建与切换的几个错误log

    1:masterha_check_repl 副本集方面报错  replicates is not defined in the configuration file! 具体信息如下: # /usr/l ...

  7. Linux下执行脚本文件出现-bash: ./startup.sh: /bin/sh^M: 坏的解释器: 没有那个文件或目录

    原因:脚本文件是在Windows环境下编辑的,windows环境下,每一行的结尾是\n\r,而Linux环境下,每一行结尾是\n.使用cat  -A  filename 可以看到每行的结尾后面多出了一 ...

  8. tornado框架中redis使用

    一.安装依赖 pip3 install tornado-redis 二.导入模块 import tornadoredis 三.创建redis对象 import tornadoredis CONNECT ...

  9. Class文件结构-练习题1

    package org.fenixsoft.clazz; public class TestClass { private int m; public int inc() { return m + 1 ...

  10. SpringCloud之Eureka:集群搭建

    上篇文章<SpringCloud之Eureka:服务发布与调用例子>实现了一个简单例子,这次对其进行改造,运行两个服务器实例.两个服务提供者实例,服务调用者请求服务,使其可以进行集群部署. ...