IOS系统input输入框为readonly时, 隐藏键盘上的上下箭头
业务中在一定场景中会将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时, 隐藏键盘上的上下箭头的更多相关文章
- H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- 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.官方的有看不懂的再百度相 ...
- jquery 修改input输入框的 readOnly属性 && input输入框隐藏
html的代码 <div class="control-group"> <label class="control-label required&quo ...
- js控制ios端的input/textarea元素失去焦点时隐藏键盘
同事在测试产品时发现这样一个:“某些页面击完input框,在点空白处时,iOS设备的键盘不能隐藏并且焦点也不会失去” 带着这个问题我进行了测试,发现在安卓的设备上并没有这种问题出现. 于是写js进行测 ...
- IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input
移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...
- Js控制iphone端的input/textarea元素失去焦点时隐藏键盘
原文http://www.it165.net/pro/html/201404/12672.html function objBlur(obj, time){ if(typeof obj != 'str ...
- js判断input输入框为空时遇到的问题 弹窗后,光标没有定位到输入框,而是直接执行我的处理页面程序
无论是会员注册还是提交订单,我们都要使用到form表单,此时我们在处理数据时,就要判断用户填写的信息.一次是直接通过js判断input输入框是否没有填信息,然后在后台处理文件中通过过滤字符串后再次判断 ...
- 怎样使用 CSS 清除 input 输入框聚焦选中时的蓝色边框?
input 输入框的聚焦选中时的边框是由 outline 属性控制的, 直接使用: input { outline: none } 即可. 如下:
- input输入框type=number时的一个缺陷
本来是在vue里发现获取不到 input[ type="number"]的值,就是输入两个小数点的数值,比如1.1.1,以为是vue的错误,然而不是,vue只做了数字处理 不明白为 ...
随机推荐
- pipelineDB学习笔记-3. Continuous Transforms (连续转换)
以下内容为本人根据pipelineDB官网内容进行翻译,如有不妥之处请指正,谢谢大家 Continuous Transforms (连续转换) 一.定义: Continuous Transforms ...
- 关于HPS和FPGA之间的桥接学习笔记一
为了实现FPGA和HPS之间的存储器共享和数据传输,Altera SoC FPGA提供了两种方式用于FPGA和HPS通信.分别是FPGA to SDRAM和AXI bridge. FPGA to SD ...
- Caffe源码-Layer类
Layer类简介 Layer是caffe中搭建网络的基本单元,caffe代码中包含大量Layer基类派生出来的各种各样的层,各自通过虚函数 Forward() 和 Backward() 实现自己的功能 ...
- 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 ...
- 【MySQL】LIMIT以及LIMIT OFFSET
LIMIT两种方法: 两种方法: ()LIMIT A; #表示从第一条记录开始取A条记录: ()LIMIT A,B; #参数A为可选参数,表示跳过A条数据(默认为0) #参数B为必选参数,表示取B行数 ...
- MySQL 有关MHA搭建与切换的几个错误log
1:masterha_check_repl 副本集方面报错 replicates is not defined in the configuration file! 具体信息如下: # /usr/l ...
- Linux下执行脚本文件出现-bash: ./startup.sh: /bin/sh^M: 坏的解释器: 没有那个文件或目录
原因:脚本文件是在Windows环境下编辑的,windows环境下,每一行的结尾是\n\r,而Linux环境下,每一行结尾是\n.使用cat -A filename 可以看到每行的结尾后面多出了一 ...
- tornado框架中redis使用
一.安装依赖 pip3 install tornado-redis 二.导入模块 import tornadoredis 三.创建redis对象 import tornadoredis CONNECT ...
- Class文件结构-练习题1
package org.fenixsoft.clazz; public class TestClass { private int m; public int inc() { return m + 1 ...
- SpringCloud之Eureka:集群搭建
上篇文章<SpringCloud之Eureka:服务发布与调用例子>实现了一个简单例子,这次对其进行改造,运行两个服务器实例.两个服务提供者实例,服务调用者请求服务,使其可以进行集群部署. ...