沃梦达 / 编程问答 / 前端问题 / 正文

IOS禁用键盘选项卡箭头

沃梦达教程前端问题

2022-01-01

IOS disable the keyboard tab arrows(IOS禁用键盘选项卡箭头)

本文介绍了IOS禁用键盘选项卡箭头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要使用JavaScript禁用iOS上的键盘选项卡箭头，甚至需要禁用基于Web的应用元标记(如果有)。

我尝试了几个选项，但在选择菜单时遇到问题。

我也无法将所有tabindex恢复为-1，因为这会损害桌面和其他设备上的制表符功能。

如有任何帮助，我们将不胜感激。

这是我为跳转到只读字段所做的一个例子。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

$(document).ready(function() {

  $('input, textarea, select').on('focus', function() {
    $('input, textarea').not(this).attr('readonly', 'readonly');
    $('select').not(this).attr("disabled", "disabled");
  });

  $('input, textarea, select').on('blur', function() {
    $('input, textarea').removeAttr("readonly");
    $('select').removeAttr("disabled");
  });

});

推荐答案

我实际上找到了一种非常有效的方法。

我要做的是检测仅iOS设备，然后禁用输入字段的跳转。

我想我可以更进一步，检测iOS和Safari。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

$(document).ready(function() {
  // Detect IOS
  if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {

    // Only active input fields in use
    $('input, textarea').on('focus', function() {
      $('input, textarea').not(this).attr("readonly", "readonly");
    });
    $('input, textarea').on('blur', function() {
      $('input, textarea').removeAttr("readonly");
    });

    // Disable tabing to select box's
    $('select').attr('tabindex', '-1');
  }
});

这篇关于IOS禁用键盘选项卡箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：IOS禁用键盘选项卡箭头