选择了HTML5的一个属性contenteditable。处理了复制内容插入的样式问题。
加上了@paste="optimizePasteEvent"事件的监听来进行处理。
html输入框部分：
<div ref="textarea" class="textarea" id="textarea" contenteditable="true" placeholder="随便说说" @focus="removeDefaultContent" @blur="addDefaultContent" @input="changeAnswerContent" @paste="optimizePasteEvent">
</div>
js代码部分:
method: {
// 监听粘贴内容到输入框事件，对内容进行处理
optimizePasteEvent(e) {
e.stopPropagation()
e.preventDefault()
let text = '', event = (e.originalEvent || e)
if (event.clipboardData && event.clipboardData.getData) {
text = event.clipboardData.getData('text/plain')
} else if (window.clipboardData && window.clipboardData.getData) {
text = window.clipboardData.getData('text')
}
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text)
} else {
document.execCommand('paste', false, text)
}
},
}
移动端禁用系统复制
<style type="text/css">
*{
-webkit-touch-callout:none; /*系统默认菜单被禁用*/
-webkit-user-select:none; /*webkit浏览器*/
-khtml-user-select:none; /*早期浏览器*/
-moz-user-select:none;/*火狐*/
-ms-user-select:none; /*IE10*/
user-select:none;
}
</style>
使用上面的样式可以禁用h5嵌入app的系统复制。不管是安卓还是ios都可以生效。但是在手机浏览器中不生效，需要再添加如下代码。
<script type="application/javascript">
//PC端 使右键和复制失效
document.oncontextmenu = new Function("event.returnValue=false");
document.onselectstart = new Function("event.returnValue=false");
//ios
document.oncontextmenu = function (e) {
e.preventDefault();
};
document.onselectstart = function (e) {
e.preventDefault();
};
//安卓
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
document.ontouchend = function () {
throw new Error("NO ERRPR:禁止长按弹出");
}
window.ontouchstart = function(e) {
e.preventDefault();
};
document.body.addEventListener('touchstart', function () { });
document.body.onbeforecopy = function () {
window.getSelection().removeAllRanges();
}
document.body.oncopy = function () {
window.getSelection().removeAllRanges();
return false;
}
</script>
