IOS system input to the input box readonly, hidden down arrows on the keypad

Business in a certain scene will be set to read-only input, the input box input focus when taken in IOS safari, up and down arrows on the keyboard will appear, this user experience is very bad, how to get rid of it?

<input readonly="readonly"/>

Talk about ideas:

Up and down arrows are not, meta tags or listen for events to address by setting the html property because they can not listen arrow and its events. These arrows are intended to allow users to easily switch freely up and down more input in.

But for the state of the input box is read-only, the user should not eject the arrow so.

The only option is 当输入被聚焦时禁用表单中的所有其他输入, so it will not appear tab to switch up and down.

DETAILED DESCRIPTION A method is an input focus, than the selected input for all input and textarea element, adding readobly parameters.

For select element, adding tabindex = -1 parameter, so it does not switch the list.

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