如何在WebView中禁用用户文本选择[React-Native]
如何在WebView中禁用用户文本选择[React-Native]
提问于 2016-11-29 07:06:55
我正在试图弄清楚如何在我的ios应用程序的React-Native WebView中禁用文本选择。在站点上使用设置为none的css样式user-select在使用设备或模拟器时似乎不起作用，但它在浏览器中确实起作用。有没有办法使用React-Native WebView禁用它，或者我需要使用一些本地代码来实现这一点？
使用React-Native 0.30，iOS 9-10
回答 4
Stack Overflow用户
发布于 2018-03-04 02:49:20
我可以通过在View中封装WebView并设置一些属性来禁用React Native侧的缩放、文本选择和其他指针事件：
<View pointerEvents="none">
<WebView
source={{ uri: webviewUrl }}
scrollEnabled={false}
/>
</View>Stack Overflow用户
发布于 2020-07-11 05:51:13
假设您正在访问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和安卓设备上运行)
享受吧..。
Stack Overflow用户
发布于 2016-11-29 15:10:11
documentation没有提到这一点，所以我选择本机实现，这比看起来更容易。您只需在包含所需选项的本机模块中重新实现this files (可能还有其他一些)，请参阅this answer和this one。
也许这个包也可以帮助你实现你的模块：https://github.com/lucasferreira/react-native-webview-android
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40855103
复制相关文章
相似问题
腾讯云开发者
