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只做了数字处理 不明白为 ...
随机推荐
- 如何上传项目到github
喜欢的同学可以看一下原文,讲得更加详细哦 原文地址:http://www.cnblogs.com/cxk1995/p/5800196.html 首先你需要一个github账号,所有还没有的话先去注册吧 ...
- intellij cpu占有高解决办法(亲测有效!)
File---Settings---Inspections---把勾都去掉或者选自己需要的部分.
- Node6-1单元测试mocha
1.初步简单的测试 在src新建一个math.js的文件.src/math.js module.exports ={ add:(...args)=>{ return args.reduce((p ...
- 张亦总结《AG百家乐庄闲,龙虎中下三路技巧和三株路的运用》
关于三珠路的各种打法,这里我做个详细的讲解 三珠路的打法源于澳门赌王叶汉,需要了解赌王叶汉的著作<BJL投注公式>的可以加我Q:<10353581>进行详细解答 叶汉的打法 ...
- 【CV现状-2】三维感知
#磨染的初心--计算机视觉的现状 [这一系列文章是关于计算机视觉的反思,希望能引起一些人的共鸣.可以随意传播,随意喷.所涉及的内容过多,将按如下内容划分章节.已经完成的会逐渐加上链接.] 缘起 三维感 ...
- Linux-3.14.12内存管理笔记【伙伴管理算法(4)】
此处承接前面未深入分析的页面释放部分,主要详细分析伙伴管理算法中页面释放的实现.页面释放的函数入口是__free_page(),其实则是一个宏定义. 具体实现: [file:/include/linu ...
- Path Manipulation 路径操作
- ElementUI table 点击编辑按钮进行编辑实现示例
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta nam ...
- WPF 3D 球面导览
基于WPF的3D Sphere实现模式,升级实现了该3D导览Demo.先pose一张demo效果图 所有顶点的坐标来源于足球的顶点.足球整个球面完全由正五边形和正六边形拼成,每条拼缝的长度一致,故知道 ...
- Docker 私服Registry简介与使用Docker-Compose安装Registry
场景 Docker-Compose简介与Ubuntu Server 上安装Compose: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...