如何禁用iPad端React Native Webview的文本选择放大镜

方案1：修改WebView加载的H5页面代码（优先推荐） #

直接在H5页面的全局CSS中新增以下规则，覆盖Safari内核默认手势配置：

* {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  touch-action: manipulation;
}
/* 保留输入框的文本选择能力，避免影响输入功能 */
input, textarea {
  -webkit-user-select: auto !important;
  user-select: auto !important;
}

如果CSS配置后仍有问题，新增全局JS事件拦截逻辑，禁用非输入区域的长按默认行为：

document.addEventListener('touchstart', function(e) {
  const targetTag = e.target.tagName.toUpperCase();
  if (targetTag !== 'INPUT' && targetTag !== 'TEXTAREA') {
    e.preventDefault();
  }
}, { passive: false });

方案2：RN侧WebView注入规则（无需修改H5代码时使用） #

如果你无法修改H5侧的代码，可以通过react-native-webview的injectedJavaScript属性，将上述CSS和JS规则注入到页面加载流程中：

import WebView from 'react-native-webview';

const injectedJs = `
  const style = document.createElement('style');
  style.textContent = \`
    * {
      -webkit-user-select: none !important;
      user-select: none !important;
      -webkit-touch-callout: none !important;
      touch-action: manipulation;
    }
    input, textarea {
      -webkit-user-select: auto !important;
      user-select: auto !important;
    }
  \`;
  document.head.appendChild(style);
  
  document.addEventListener('touchstart', function(e) {
    const targetTag = e.target.tagName.toUpperCase();
    if (targetTag !== 'INPUT' && targetTag !== 'TEXTAREA') {
      e.preventDefault();
    }
  }, { passive: false });
  true;
`;

// WebView组件配置
<WebView
  source={{ uri: '你的页面地址' }}
  injectedJavaScript={injectedJs}
  // 原有其他配置保持不变
/>

方案3：iOS原生侧修改（上述方案都无效时使用） #

如果前两种方案都无法覆盖场景，可以在iOS原生代码中添加WKWebView分类，禁用文本选择相关的系统行为：

// 新增WKWebView分类文件
#import <WebKit/WebKit.h>

@implementation WKWebView (DisableLoupe)
- (BOOL)canPerformAction:(SEL)action withSender:(id)sender {
    // 禁用文本选择相关的系统操作
    if (action == @selector(select:) || action == @selector(selectAll:) || 
        action == @selector(copy:) || action == @selector(paste:)) {
        return NO;
    }
    return [super canPerformAction:action withSender:sender];
}
@end

内容的提问来源于stack exchange，提问作者Niklavs Kalbergs