使用cordova防止android编辑栏答案

【问题标题】：Prevent android edit bar using cordova使用cordova防止android编辑栏
【发布时间】：2018-05-16 15:49:21
【问题描述】：

我正在 Cordova/PhoneGap 上开发一个电子书应用程序，我希望能够从某些部分而不是其他部分中选择文本。 Cordova 有这个开箱即用的 CSS 以避免选择：

-webkit-touch-callout: none;    /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none;      /* prevent copy paste, to allow, change 'none' to 'text' */

我允许通过将user-select 的值重新定义为text 来进行选择，例如在#content 部分中：

#content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1em;
  box-sizing: border-box;
  outline: none;
  user-select: text !important;
  -webkit-user-select: text !important;
}

这很好用，我可以选择文本，但它有一个问题：显示来自 android 的默认编辑栏（在下面的屏幕截图中为浅蓝色），我想避免这种情况，因为我将拥有自己的用于复制/共享的控制器。我该怎么做才能避免它出现？

我更喜欢 Cordova/PhoneGap 解决方案，但如果唯一的方法是使用 Java 并修改由 Cordova 生成的 java 代码，我会接受它。

【问题讨论】：

标签： javascript android css cordova phonegap

【解决方案1】：

假设您正在使用不应触发默认编辑栏的 DIV 元素。

这些是我采取的步骤：

从 css 类 #content 中删除 user-select 和 -webkit-user-select，因为这始终允许打开默认编辑栏。
将contenteditable-属性添加到#content，这样也可以选择单个单词。尽管#content 也有user-select: none 一个selectstart-当用户想要选择这个元素时触发事件。这可以在selectstart-handler 中使用来打开您自己的弹出窗口/窗口，而不是默认编辑栏。

请注意：以下示例显示了如何在#content 中选择某个元素。所以在这个例子中，用户（也）能够选择段落中的某些单词，不仅是整个段落，而且您必须使用 SPAN-element 将它们包装起来以仅突出显示它们。

这应该适用于所有平台：

<style>

  div {
    touch-callout: none;
    text-size-adjust: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
    border: 1px solid red;
    padding: 1em;
    height: 50px;
  }

  #content {
    margin-top: 50px;
    height: 100px;
    padding: 1em;
    box-sizing: border-box;
    border: 1px solid blue;
  }

</style>
<body>

<div>
  This text can not be selected at all
</div>

<div id="content" contenteditable="true">
  This text can be <span>selected</span> but not by using default editor
  This text can be <span>selected</span> but not by using default editor
  This text can be <span>selected</span> but not by using default editor
</div>

</body>

JS：

var selected = false;
var isHolding = false;
document.getElementById('content').addEventListener('selectstart', function(event) {
  // preventDefault prevents to open the default-editor
  event.preventDefault();

  // prevents to fire selectstart-event several times
  if(selected)return;
  selected = true;

  // simulate delay like a real selection event by using setTimeout
  setTimeout(function(){

    // is user still holding onto screen, then select text
    // otherwise nothing is highlighted
    if(isHolding) {
      // event.target contains the element that is selected
      // it can be a SPAN- or the whole #content-element
      var selectedElement = event.target.parentNode;
      console.log(selectedElement);
      highlightTextNode(selectedElement);

      var selectedText = selectedElement.textContent ? selectedElement.textContent : selectedElement.innerText;
      alert("this text is selected: "+ selectedText);

      //  HERE! You might want to open a popup here to show/process this selected text

    }

    // reset selected
    selected = false;

  },1000);

},false);


// check for a user really touched #content to know whether a text should be highlighted or not
document.getElementById('content').addEventListener('touchstart',function(event) {
  isHolding = true;
},false);


// check for a user really left #content to know whether a text should be highlighted or not
document.getElementById('content').addEventListener('touchend',function(event) {
  isHolding = false;
},false);


// just a function to highlight any HTML-Node
function highlightTextNode(node){
  if(node)node.setAttribute('style','color: yellow');
}

希望对您有所帮助。

【讨论】：

这不适用于我的代码（尽管它自己工作），我需要尝试调整它，因为它仍然不是我想要的（使用这个解决方案，整个块将被选中而不是特定文本）
我很遗憾听到这个消息，但正如我在回答中所说，必须使用某些 HTML 实体（如 SPAN），以便可以进行单词选择。不过，在我的回答中，您可以单独标记“选定”字词，因为它们是由 SPAN 包装的