使用cordova防止android编辑栏
Posted
技术标签:
【中文标题】使用cordova防止android编辑栏【英文标题】：Prevent android edit bar using cordova 【发布时间】：2018-05-16 15:49:21 【问题描述】：我正在 Cordova/PhoneGap 上开发一个电子书应用程序，我希望能够从某些部分而不是其他部分中选择文本。 Cordova 有这个开箱即用的 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 并修改由 Cordova 生成的 java 代码，我会接受它。
【问题讨论】：
【参考方案1】：假设您正在使用不应触发默认编辑栏的 DIV 元素。
这些是我采取的步骤：
从 css 类 #content 中删除 user-select 和 -webkit-user-select，因为这始终允许打开默认编辑栏。
将contenteditable-属性添加到#content，这样也可以选择单个单词。尽管#content 也有user-select: none 一个selectstart-当用户想要选择这个元素时触发事件。这可以在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 包装的以上是关于使用cordova防止android编辑栏的主要内容，如果未能解决你的问题，请参考以下文章
<Cordova/CDVLocalStorage.h> 未找到
如何使用 Cordova 显示状态栏通知 - Android 和 IOS