Android-Bearbeitungsleiste mit CORDOVA verhindern

Ich entwickle eine E-Book-App auf Cordova/PhoneGap, in der ich Text aus einigen Abschnitten auswählen kann, aber nicht aus anderen. Cordova hat diese CSS aus der Box die Auswahl zu vermeiden:Android-Bearbeitungsleiste mit CORDOVA verhindern

-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' */

Und ich ermöglichen die Auswahl durch eine Neudefinition des Wertes von user-select-text, wie zum Beispiel in der #content Abschnitt:

#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; 
}

Dies funktioniert gut , und ich kann Text auswählen, aber es hat ein Problem: die Standard-Bearbeitungsleiste (in hellblau im Screenshot unten) von Android zeigt sich, und ich möchte das vermeiden, da ich meine eigenen Controller zum Kopieren/Teilen haben werde. Was kann ich tun, damit es nicht angezeigt wird?

würde ich eine Cordova/PhoneGap Lösung bevorzugen, aber wenn die einzige Möglichkeit, Java verwendet, und Modifizieren des Java-Code von Cordova erzeugt, werde ich dafür offen sein.

Quelle

2017-12-02 Alvaro Montoro

Angenommen, Sie verwenden ein DIV-Element, das die Standard-Edit-Leiste nicht auslösen soll.

Dies sind die Schritte, die ich getroffen habe:

entfernen user-select und -webkit-user-select aus der CSS-Klasse #content da diese immer die default-edit-Bar öffnen können.
Fügen Sie das contenteditable -Attribut zu #content hinzu, so dass auch einzelne Wörter ausgewählt werden können. Und obwohl #content auch user-select: none hat, wird ein selectstart -Ereignis ausgelöst, wenn ein Benutzer dieses Element auswählen möchte. Dies kann innerhalb eines selectstart -Handlers verwendet werden, um ein eigenes Popup/Fenster und nicht die Standard-Editierleiste zu öffnen.

Beachten Sie, dass: Das folgende Beispiel zeigt, wie Sie ein bestimmtes Element innerhalb #content auswählen können. In diesem Beispiel ist der Benutzer also (auch) in der Lage, bestimmte Wörter innerhalb eines Absatzes auszuwählen, nicht nur den ganzen Absatz, sondern Sie müssen sie auch mit einem SPAN -Element umhüllen, um nur diese hervorzuheben.

Dies sollte mit allen Plattformen:

<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'); 
}

Hope this Hilfe.

Quelle

2017-12-03 12:46:49 Blauharley

Dies funktionierte nicht mit meinem Code (obwohl es von selbst funktionierte), ich muss versuchen, es anzupassen, da es immer noch nicht genau das ist, was ich suche (mit dieser Lösung werden ganze Blöcke ausgewählt anstelle von bestimmten Text) –

Es tut mir leid zu hören, aber wie ich in meiner Antwort angegeben habe bestimmte HTML-Entities (wie SPAN) verwendet werden, so dass die Wortauswahl möglich ist. Trotzdem können Sie in der Antwort "ausgewählte" Wörter einzeln markieren, da sie von SPANs umschlossen sind – Blauharley

Android-Bearbeitungsleiste mit CORDOVA verhindern

Antwort

Verwandte Themen