コードバーを使用してアンドロイド編集バーを防止する

私はいくつかのセクションからテキストを選択できるようにしたいが、他のセクションからはテキストを選択できないように、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' */

例えば#contentセクションにように私は、textにuser-selectの価値を再定義することにより、選択を可能：

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

これは正常に動作しますテキストを選択することはできますが、アンドロイドからのデフォルトの編集バー（下のスクリーンショットの明るい青色の部分）が表示され、コピー/共有用に自分のコントローラーを使用するので避けたいのです。それが表示されないようにするにはどうすればよいですか？

Iは、コルドバ/ PhoneGapのソリューションを好むだろうが、唯一の方法は、Javaを使用し、コルドバで生成されたJavaコードを変更している場合、私はそれに開放されます。

出典

2017-12-02 Alvaro Montoro

デフォルトエディットバーをトリガーしないDIV要素を使用しているとします。

これらは私が撮影した手順は次のとおりです。これは、常にデフォルトの編集バーを開くことができますので、

は、CSSクラス#contentからuser-selectと-webkit-user-selectを削除します。
contenteditable -Attributeを#contentに追加すると、個々の単語も選択できます。そして#contentもuser-select: noneを持っていますが、ユーザがこの要素を選択したいときはselectstart -eventが発生します。これはselectstartハンドラ内でデフォルトの編集バーではなく、独自のポップアップ/ウィンドウを開くために利用できます。

注意：次の例は、#content内の特定の要素を選択する方法を示しています。したがって、この例では、段落内の特定の単語だけでなく、段落全体を選択することもできますが、たとえば、SPAN要素を使用して折り返す必要があります。

これは、すべてのプラットフォームで動作するはず：

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

は、このヘルプを願っています。

出典

2017-12-03 12:46:49 Blauharley

これは私のコードでは機能しませんでしたが（それ自体は機能しましたが）、私が探しているものではありません（このソリューションでは、特定のテキスト） –

聞いて申し訳ありませんが、私の答えで述べたように、SPANのような特定のHTMLエンティティを使用しなければならないので、単語選択が可能です。それにもかかわらず私の答えでは、あなたがSPANの – Blauharley

コードバーを使用してアンドロイド編集バーを防止する

答えて

関連する問題