Front-end developers are the closest group to users, so front-end development needs to have a user perspective. Whether it is from page layout, interactive experience, or (anti-theft and theft), there needs to be expedient measures and countermeasures. The following records some of the requirements I encountered, and the implementation process.
replace mouse cursor
Have you thought about replacing the browser's own rendering of the mouse, like this:
This can be achieved using the following css code:
/* 修改鼠标指针样式 */
body {
cursor: url(../CSS/default.gif), pointer; /* default.cur需要放在你项目目录下， */
}Prevent users from copying text
<p onselectstart="return false">🈲复制Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
/** 或者 **/
<div style="user-select: none;">
CSS 属性 user-select 控制用户能否选中文本。除了文本框内，它对被载入为 chrome 的内容没有影响。
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam at laboriosam aut. Accusamus tempore nisi laudantium pariatur. Quos, veniam dicta suscipit repellat amet delectus, deserunt sit laboriosam, ipsum quo dolores.
</div>When this line of text is rendered on the page, the user cannot use the mouse to select the text and copy it. Of course, as long as he opens the console and finds the corresponding dom, he can easily copy the text in it.
Disable user right click
There are two common ways to open the console, 1. Right-click-check 2. Keyboard shortcut command+option+i.
If the user does not know the shortcut key, then we disable the right click, and he cannot enter the console to copy the text. If he knows the shortcut keys, then you think I didn't say it (囧).
Disable right click code:
// 可以加在某些元素上，如：
<body oncontextmenu="return false">
<div class="wrapper">
<h3>可以阻止普通用户的右键行为</h3>
</div>
</body>
// 也可以加在整个window上：
window.addEventListener('contextmenu', e => e.preventDefault())In this way, using the right mouse button will not have any response.
Custom selection text style
body::selection {
color:#FFFFFF;
background-color:#E84893;
text-shadow:none;
}The above effect can be achieved.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。