pc端和移动端复制粘贴问题

选择了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>