Предотвратить редактирование панели Android с помощью Cordova

Question

Предотвратить редактирование панели Android с помощью Cordova

1

Я разрабатываю приложение для электронной книги на Cordova/PhoneGap, в котором я хочу иметь возможность выбирать текст из некоторых разделов, но не из других. Кордова имеет этот 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 и модифицировать Java-код, созданный Cordova, я буду открыт для него.

Alvaro Montoro 02 дек. 2017, в 21:23

Источник

Теги:

javascript

android

css

cordova

phonegap

1 ответ

Ещё вопросы

Blauharley · Answer 1 · 2017-12-03T11-15-00.000Z

Предполагая, что вы используете DIV -element, который не должен запускать панель редактирования по умолчанию.

Это шаги, которые я предпринял:

Удалите user-select и -webkit-user-select из css-класса #content потому что это всегда позволяет открыть панель редактирования по умолчанию.
Добавьте contenteditable -Attribute в #content, чтобы можно было выбрать отдельные слова. И хотя #content также имеет user-select: none один selectstart -event не запускается, когда пользователь хочет выбрать этот элемент. Это можно использовать в 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