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