常見前端需求合集

來了老弟發表於2022-05-17
前端
前端開發者是和使用者最接近的群體，所以前端開發需要具備使用者視角。無論從頁面佈局、互動體驗，還是（防偷防盜）都需要有權宜之計和制敵之策。下面記錄一些我遇到的需求，以及實現過程。

替換滑鼠游標

你是否想過替換瀏覽器自己渲染的滑鼠，像下面的樣子：

使用下面的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;
}

演示

可以實現，上面的效果。

相關文章