选择了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)
}
},
}
移动端禁用系统复制
*{
-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;
}
使用上面的样式可以禁用h5嵌入app的系统复制。不管是安卓还是ios都可以生效。但是在手机浏览器中不生效，需要再添加如下代码。
//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;
}
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
HUAWEI Health Kit为开发者提供用户自定义的跑步课程导入接口，便于用户在华为运动健康App和华为智能穿戴设备上查看来自生态应用的训练课表，开启科学、适度的运动训练。 跑步课程导入能力支持生态应用在获取用户的华为帐号授权后，将跑步课程数据写入至华为…
