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

选择了HTML5的一个属性contenteditable。处理了复制内容插入的样式问题。

加上了@paste="optimizePasteEvent"事件的监听来进行处理。

html输入框部分:


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)
    }
  },
}
移动端禁用系统复制

使用上面的样式可以禁用h5嵌入app的系统复制。不管是安卓还是ios都可以生效。但是在手机浏览器中不生效,需要再添加如下代码。

你可能感兴趣的:(html,javascript,css)