1
头图
前端开发者是和用户最接近的群体,所以前端开发需要具备用户视角。无论从页面布局、交互体验,还是(防偷防盗)都需要有权宜之计和制敌之策。下面记录一些我遇到的需求,以及实现过程。

替换鼠标光标

你是否想过替换浏览器自己渲染的鼠标,像下面的样子:

使用下面的css代码就可以实现:

/* 修改鼠标指针样式 */
body {
    cursor: url(../CSS/default.gif), pointer;   /* default.cur需要放在你项目目录下, */
}

禁止用户复制文字

<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>

当这行文字渲染到页面上,用户是无法使用鼠标选中文字复制的。当然,只要他打开控制台,找到对应的dom还是可以轻松将其中的文字复制出来。

禁止用户右键

打开控制台的方式有常见两种,1. 右键-检查 2.键盘快捷键 command+option+i。

如果,用户不知道快捷键,那么我们把右键点击禁用掉,他就无法进入控制台复制文字了。如果他知道快捷键,那你当我没说(囧)。

禁用右键代码:

// 可以加在某些元素上,如:
<body oncontextmenu="return false">
    <div class="wrapper">
        <h3>可以阻止普通用户的右键行为</h3>
    </div>
</body>

// 也可以加在整个window上:
window.addEventListener('contextmenu', e => e.preventDefault())

这样使用鼠标右键,就不会有任何反应了。

自定义选择文字样式

body::selection {
    color:#FFFFFF;
    background-color:#E84893;
    text-shadow:none;
}

演示

可以实现,上面的效果。

a标签的多种用法

html a标签的妙用

鼠标拖动事件

拖动元素边缘改变宽度


来了老弟
508 声望31 粉丝

纸上得来终觉浅,绝知此事要躬行