业务中在一定场景中会将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')
}
})