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')
}
})
上一篇:秋季学期学习总结&&以及下学期的期待


下一篇:js中的hasOwnProperty和isPrototypeOf方法