如何在 WebView [React-Native] 中禁用用户文本选择
Posted
技术标签:
【中文标题】如何在 WebView [React-Native] 中禁用用户文本选择【英文标题】：How to disable user text selection in WebView [React-Native] 【发布时间】：2017-04-12 19:30:33 【问题描述】：我试图弄清楚如何在我的 ios 应用程序的 React-Native WebView 中禁用文本选择。在网站上使用 CSS 样式 user-select 设置为 none 似乎在使用设备或模拟器时不起作用，但它在浏览器中确实起作用。有没有办法使用 React-Native WebView 禁用此功能，或者我是否需要使用一些本机代码来实现此功能？
使用 React-Native 0.30，iOS 9-10
【问题讨论】：
【参考方案1】：我能够在 React Native 端禁用缩放、文本选择和其他指针事件，方法是将 WebView 包装在 View 中并设置一些道具：
<View pointerEvents="none">
<WebView
source= uri: webviewUrl
scrollEnabled=false
/>
</View>
【讨论】：
添加后，它将禁用所有 webview 触摸。有没有办法只禁用长按以避免复制选择粘贴选项？【参考方案2】：假设你在 react native 中访问 webview 上的特定 url，那么在 url 中，你可以使用以下技巧：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<div style="font-size:80%;padding-left:10px;padding-right:10px;">
<!DOCTYPE html>
<html>
<head>
<script>
function absorbEvent_(event)
var e = event || window.event;
e.preventDefault && e.preventDefault();
e.stopPropagation && e.stopPropagation();
e.cancelBubble = true;
e.returnValue = false;
return false;
function preventLongPressMenu(node)
node.ontouchstart = absorbEvent_;
node.ontouchmove = absorbEvent_;
node.ontouchend = absorbEvent_;
node.ontouchcancel = absorbEvent_;
function init()
preventLongPressMenu(document.getElementByTagName('body img'));
</script>
<style>
*:not(input):not(textarea)
-webkit-user-select: none; /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
</style>
</head>
<body onload="init()" >
TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>
</body>
以上将禁用文本选择，但它允许其他功能，例如“单击”。 （它适用于 iOS 和 android 设备）
享受...
【讨论】：
【参考方案3】：documentation 没有提到这一点，所以我会使用本机实现，这比看起来更容易。您只需在包含所需选项的本机模块中重新实现 this files（可能还有其他一些），请参阅 this answer 和 this one。
也许这个包也可以帮助你实现你的模块：https://github.com/lucasferreira/react-native-webview-android
【讨论】：
【参考方案4】：我找到了解决方案。请尝试。
*
-webkit-user-select: none;
-webkit-touch-callout: none;
【讨论】：
你能解释一下它的作用吗？以上是关于如何在 WebView [React-Native] 中禁用用户文本选择的主要内容，如果未能解决你的问题，请参考以下文章
如何在 WebView [React-Native] 中禁用用户文本选择
如何在没有 webview 的情况下将 vimeo 播放器嵌入 react-native？
如何在WebView中禁用用户文本选择[React-Native]
如何在 react-native webView 和 React web-app 之间进行通信？