如何禁用UIWebKit View中点击input触发的底部工具栏？

我之前也碰到过这个头疼的问题！光靠CSS禁用触摸选择根本压不住WebKit默认的输入工具栏，得结合原生配置或者更针对性的网页端设置来解决，给你几个实测有效的方案：

方案一：原生WKWebView配置（最推荐） #

如果你的项目用的是WKWebView（现在苹果更推荐这个替代旧的UIWebView），可以直接通过原生代码清空输入辅助工具栏的按钮组，从根源上让工具栏消失：

Swift 示例 #

// 在创建WKWebView后或者合适的时机设置
webView.inputAssistantItem.leadingBarButtonGroups = []
webView.inputAssistantItem.trailingBarButtonGroups = []

Objective-C 示例 #

// 同样在初始化或配置WKWebView时设置
webView.inputAssistantItem.leadingBarButtonGroups = @[];
webView.inputAssistantItem.trailingBarButtonGroups = @[];

这个方法直接操作WebKit的输入辅助项，把工具栏左右的按钮组都清空，工具栏自然就不会显示了，效果最稳定。

方案二：网页端CSS+属性补充 #

除了你已经用的CSS规则，再给input元素加上几个属性，进一步抑制WebKit的默认行为：

input {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  /* 关闭自动补全和自动修正，减少WebKit触发工具栏的诱因 */
  autocomplete: off;
  autocorrect: off;
  /* 禁用WebKit默认的输入控件样式 */
  -webkit-appearance: none;
}

同时给input标签直接加上autocomplete="off"和autocorrect="off"属性，双管齐下：

<input type="text" autocomplete="off" autocorrect="off">

方案三：JavaScript注入辅助（针对旧UIWebView） #

如果还在使用旧的UIWebView，可以尝试注入JS来拦截输入框的焦点事件，阻止工具栏触发：

document.addEventListener('focusin', function(e) {
  if (e.target.tagName === 'INPUT') {
    // 尝试阻止默认行为
    e.preventDefault();
    // 强制设置光标位置，避免触发选择相关的工具栏逻辑
    e.target.setSelectionRange(0, 0);
  }
});

不过这个方法的兼容性不如原生方案，不同版本的WebKit可能效果不一，优先推荐方案一。

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