如何在 WebView [React-Native] 中禁用用户文本选择
[英]How to disable user text selection in WebView [React-Native]
问题描述
I'm trying to figure out how to disable text selection while in a React-Native WebView for my ios app.
我试图弄清楚如何在 React-Native WebView 中为我的 ios 应用程序禁用文本选择。 Using the css style user-select set to none on the site doesn't seem to be working while using a device or simulator but it does work in a browser.在网站上使用 css 样式的user-select设置为none似乎在使用设备或模拟器时不起作用，但在浏览器中确实有效。 Is there a way to disable this using the React-Native WebView or do I need to use some native code to achieve this?有没有办法使用 React-Native WebView 禁用此功能，还是我需要使用一些本机代码来实现此功能？
Using React-Native 0.30, iOS 9-10使用 React-Native 0.30, iOS 9-10
5 个解决方案
解决方案1
1 2018-03-03 18:49:19
I was able to disable zooming, text selection and other pointer events on the React Native side, by wrapping WebView in a View and setting a few props:通过将WebView包装在View并设置一些道具，我能够在 React Native 端禁用缩放、文本选择和其他指针事件：
<View pointerEvents="none">
<WebView
source={{ uri: webviewUrl }}
scrollEnabled={false}
/>
</View>
解决方案2
1 2020-07-10 21:51:12
Assuming that you are accessing a particular url on the webview in react native, then in the url, you can use the following tricks:假设您在 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>
The above will disable text selection, but it allows other functions such as "click".以上将禁用文本选择，但它允许其他功能，例如“单击”。 (it works in both iOS and android devices) （它适用于 iOS 和 android 设备）
Enjoy...享受...
解决方案3
0 2016-11-29 07:10:10
The documentation does not mention this, so I would go with native implementation, which is easier than it might seem. 文档没有提到这一点，所以我会使用本机实现，这比看起来更容易。 You just have to re-implement this files (and maybe some others) in a native module that includes the options you want, see this answer and this one .您只需要在包含您想要的选项的本机模块中重新实现这些文件（可能还有其他一些文件），请参阅此答案和此答案。
Maybe this package can also help you implement your module: https://github.com/lucasferreira/react-native-webview-android也许这个包也可以帮助你实现你的模块： https : //github.com/lucasferreira/react-native-webview-android
解决方案4
0 2021-06-18 17:02:24
I found a solution.我找到了解决方案。 Please try.请试试。
* {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
解决方案5
0 2022-08-11 10:14:38
I found that add body {user-select: none} can resolve the issue.我发现 add body {user-select: none} 可以解决这个问题。
body {user-select: none}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.