使用科尔多瓦防止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代码，我会开它。

答

假设您正在使用不应触发默认编辑栏的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'); 
}

希望这有助于。

这没有与我的代码工作（虽然它自己工作），我需要尝试适应它，因为它仍然不是我正在寻找（这个解决方案整个块将被选中，而不是特定的文字） –

我很遗憾听到，但正如我在回答中所述，必须使用某些HTML实体（如SPAN），以便选词是可能的。尽管如此，在我的回答中，您可以单独标记“已选”字，因为它们被SPAN包装 – Blauharley

使用科尔多瓦防止android编辑栏

相关推荐