date time comments 0 pageviews

為了防止使用操作網頁時誤刪或不小心觸發一些不可逆動作，系統規格通常要求刪除前請使用者再次確認。

傳統設計會偏向彈出 Modal 視窗，強迫使用者在【確認/刪除】或【取消】間擇一執行：


圖片來源

我不是很愛這種設計方式，理由使用者在點完【刪除】圖示/按鈕後，畫面會轉換成 Modal 對話框在中央的顯示狀態，使用者必須將游標移動一段距離去按【確認/刪除】才算完成操作。視覺變化跟手部移動的負擔較大，不符合人體工學。

因此，若不是「需強烈提醒使用者三思而後行」的情境，我有時會用另一種做法：在刪除鈕旁放個 Checkbox，使用者必須先勾選才能按下刪除鈕。如此一樣可避免使用者手滑點到誤刪，但操作上簡便許多，視覺與手部負荷較低，而勾選確認操作類似常見的授權同意 I Agree / Acknowledge 設計，也有證明「使用者為明確同意執行而非誤觸操作」的效果。
(註：愈需要嚴防誤操作的介面，一般會設計成愈不友善及無效率，如 Github 刪除專案時需在文字欄位輸入專案名稱，目的都在減少意外觸發的機率，故確認程序的方便程度請視應用情境拿捏)


圖片來源

勾選後才允許按鈕用 JavaScript 實現不是難事，若用 Vue.js MVVM，一個 v-model 加一個 :disabled 搞定：

<label><input type="checkbox" v-model="confirm">確認刪除</label>
<button :disabled="!confirm" @click="delete()">刪除</button>

最近在寫一個簡單的表單介面，刪除前需要再次確認。但網頁到目前為之用純 HTML Form 送 POST 給 MVC Controller 便能完成任務，完全沒用 JavaScript。不想為了刪除確認破功，一方面也是好玩，想挑戰不用 JavaScript 完成任務，我找到兩種不用寫 JavaScript 實現確認 Checkbox 的做法。

第一種做法是用 <input type="checkbox" required>，required 可迫使必須勾選才能送出 <form>，未填時由瀏覽器提示：

第二種做法則是用 CSS pointer-events: none 停用按鈕點選能力，並用 opacity: 0.5 將按鈕刷成半透明。當 Checkbox 被勾選時，再恢復按鈕的點擊事件。如此能做到「未勾確認前按鈕灰色沒法點，勾選後才可按鈕」的效果。

程式碼如下提供參考。線上展示 (註：jsbin 無法模擬送出表單，請自行想像)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>確認刪除</title>
    <style>
        html,
        body {
            font-family: 'Courier New', Courier, monospace;
        }
        fieldset {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
            width: 300px;
            label {
                cursor: pointer;
            }
        }
    </style>
</head>

<body>
    <fieldset>
        <legend>Form / Checkbox Required</legend>
        <form method="post" action="/delete">
            <label>
                <input type="checkbox" required>
                <span>確認刪除</span>
            </label>
            <button type="submit">刪除</button>
        </form>
    </fieldset>
    <fieldset>
        <legend>Checked CSS</legend>
        <style>
            .css-del-confirm button.disabled {
                pointer-events: none;
                opacity: 0.5;
                cursor: not-allowed;
            }
            /* Chrome/Edge/Safari/Firefox support :has() after 2024 */
            .css-del-confirm:has(:checked) button.disabled {
                /* Enable button when checkbox is checked */
                pointer-events: auto;
                opacity: 1;
                cursor: pointer;
            }
        </style>
        <form method="post" action="/delete">

            <span class="css-del-confirm">
                <label>
                    <input type="checkbox" required>
                    <span>確認刪除</span>
                </label>
                <button type="submit" class="disabled">刪除</button>
            </span>
        </form>
    </fieldset>

</body>

</html>

To prevent accidental irreversible actions on web pages, traditional designs use modal confirmations, which can be cumbersome. An alternative is to place a checkbox next to the delete button, requiring user confirmation before proceeding. This can be implemented without JavaScript using HTML’s required attribute or CSS’s pointer-events to manage button enabled states.


Comments

Be the first to post a comment

Post a comment