IOS系统input输入框为readonly时， 隐藏键盘上的上下箭头

业务中在一定场景中会将input 设置为只读状态，在IOS safari上当input 输入框focus 时，仍会出现键盘上的上下箭头，这种用户体验非常不好，如何干掉呢？

<input readonly="readonly"/>

说一下思路：

上下箭头是无法通过 设置html属性，meta标签或者监听事件来解决，因为这些箭头并没有可以监听它的事件。而这些箭头的本意是让用户在上下多个input 中自由方便切换。

但是对于输入框的状态是只读时，给用户弹出这样的箭头就不应该了。

唯一的选择是当输入被聚焦时禁用表单中的所有其他输入，因此就不会出现上下切换的选项卡。

具体实施方法是 focus某个input时，对于所选input之外的所有input与textarea元素，添加readobly参数。

对于select元素，添加tabindex=-1参数,使其不在切换列表中。

代码语言：javascript复制

$(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')
  }
})

focus input readonly safari select

0 人点赞