使用科爾多瓦防止android編輯欄

我正在Cordova/PhoneGap上開發電子書應用程序，我希望能夠從某些部分中選擇文本，但不能從其他部分選擇文本。科爾多瓦有這個CSS開箱避免選擇：使用科爾多瓦防止android編輯欄

-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部分的user-select價值重新定義到text，例如像：

#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顯示默認編輯欄（在下面的屏幕截圖中爲淺藍色），我想避免這種情況，因爲我將擁有自己的控制器進行復制/共享。我能做些什麼來避免它出現？

我寧願科爾多瓦/ PhoneGap的解決方案，但如果唯一的辦法就是使用Java和修改由科爾多瓦生成的Java代碼，我會開它。

來源

2017-12-02 Alvaro Montoro

假設您正在使用不應觸發默認編輯欄的DIV元素。

這些是我所採取的步驟：

從#content的CSS類刪除user-select和-webkit-user-select，因爲這會允許打開默認編輯吧。
添加contenteditable-歸因於#content，以便可以選擇單個單詞。雖然#content也已得到user-select: none a selectstart - 當用戶想要選擇此元素時觸發事件。這可以在selectstart-處理程序中使用，以打開您自己的彈出窗口而不是默認編輯欄。

請注意：以下示例顯示瞭如何在#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'); 
}

希望這有助於。

來源

2017-12-03 12:46:49 Blauharley

這沒有與我的代碼工作（雖然它自己工作），我需要嘗試適應它，因爲它仍然不是我正在尋找（這個解決方案整個塊將被選中，而不是特定的文字） –

我很遺憾聽到，但正如我在回答中所述，必須使用某些HTML實體（如SPAN），以便選詞是可能的。儘管如此，在我的回答中，您可以單獨標記「已選」字，因爲它們被SPAN包裝 – Blauharley

使用科爾多瓦防止android編輯欄

回答

相關問題