logo标签列表

如何在 WebView [React-Native] 中禁用用户文本选择

javascriptioswebviewreact-nativetextselection
4
我正在尝试弄清如何在React-Native WebView中禁用文本选择，以用于我的iOS应用。在站点上使用设置为“none”的CSS样式user-select似乎在使用设备或模拟器时无法工作，但在浏览器中可以工作。是否有一种方法可以使用React-Native WebView来禁用此选项，还是我需要使用一些本地代码来实现这一目标？
使用React-Native 0.30，iOS 9-10。
5个回答
2

我能够通过将WebView包裹在一个View中并设置几个属性，在React Native端禁用缩放、文本选择和其他指针事件：

<View pointerEvents="none">
  <WebView
    source={{ uri: webviewUrl }}
    scrollEnabled={false}
  />
</View>
3
添加此代码后，它禁用了所有WebView触摸功能。有没有办法仅禁用长按以避免复制-选择-粘贴选项？ - Sujit
1
假设您正在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设备）。
祝您使用愉快...
0
我发现添加 body {user-select: none} 可以解决这个问题。
body {user-select: none}
0
0

我找到了一个解决方案。请尝试。

* {
  -webkit-user-select: none;
  -webkit-touch-callout: none; 
}
你能解释一下它是做什么的吗？ - XRaycat
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接