JavaScript確認キャンセル-フロントエンドQ&A-php.cn

JavaScript確認キャンセル

王林

リリース： 2023-05-12 13:20:07

オリジナル

3172 人が閲覧しました

JavaScript の確認およびキャンセル機能とは、ユーザーが Web サイト上で特定の操作を実行すると、操作を確認するかキャンセルするかをユーザーに尋ねるダイアログボックスが表示されることを意味します。この機能は、削除操作やフォーム送信など、Web サイト開発で広く使用されています。この記事ではJavaScriptを使って確定キャンセル機能を実装する方法を詳しく紹介します。

1. 確認・キャンセル機能とは

確認・キャンセル機能(確認)とは、ユーザーが何らかの操作を行った際に表示される、確認するかキャンセルするかを促すプロンプトボックスです。操作をキャンセルします。通常、「OK」と「キャンセル」の 2 つのボタンがあり、ユーザーは必要に応じていずれかのボタンをクリックします。 [OK] ボタンは操作を実行しますが、[キャンセル] ボタンは操作を実行せず、プロンプトボックスを閉じるだけです。

2. Javascriptを使用した確定キャンセル機能の実装方法

JavaScriptのconfirmメソッドで確定キャンセル機能を実装できます。この方法ではプロンプトボックスがポップアップ表示され、ユーザーは [OK] または [キャンセル] ボタンをクリックできます。このメソッドは、ユーザーが [OK] ボタンをクリックすると true を返し、[キャンセル] ボタンをクリックすると false を返します。

次は、JavaScript を使用して確定キャンセル関数を実装するサンプルコードです。

<script>
function deleteBlog() {
    // 弹出对话框
    var r = confirm("确定要删除这篇博客吗？");
    if (r == true) {
        // 用户点击了确定按钮
        // 执行删除操作
        alert("删除成功！");
    } else {
        // 用户点击了取消按钮
        // 不执行删除操作
    }
}
</script>

<button onclick="deleteBlog()">删除博客</button>

ログイン後にコピー

このサンプルコードでは、ボタンがクリックされたときに呼び出される deleteBlog という名前の関数を定義します。 deleteBlog 関数は、このブログを削除してもよいかどうかをユーザーに尋ねるプロンプトボックスをポップアップ表示します。ユーザーが [OK] ボタンをクリックすると、関数は削除操作を実行します。ユーザーが [キャンセル] ボタンをクリックすると、関数は削除操作を実行しません。

3. カスタマイズされたプロンプトボックス

JavaScript の確認メソッドでポップアップするプロンプトボックスは比較的単純で、複雑なニーズには対応できません。プロンプトボックスをカスタマイズすることで、より美しく柔軟なプロンプトボックスを実現できます。

プロンプトボックスのカスタマイズとは、実際には HTML 要素を定義し、それをページに表示し、CSS スタイルを使用してページ上の外観とスタイルを制御することです。次に、JavaScript でイベントトリガーを使用して、プロンプトボックスの表示と非表示を制御します。

たとえば、次は CSS を使用してカスタマイズされたプロンプトボックスです:

<div class="confirm" id="confirmDiv">
    <div class="confirm-title">是否确定删除？</div>
    <div class="confirm-btns">
        <button class="confirm-btn" id="okBtn">确定</button>
        <button class="confirm-btn" id="cancelBtn">取消</button>
    </div>
</div>

<script>
var confirmDiv = document.getElementById("confirmDiv");
var okBtn = document.getElementById("okBtn");
var cancelBtn = document.getElementById("cancelBtn");

function deleteBlog() {
    // 显示提示框
    confirmDiv.style.display = "block";
    
    // 取消按钮点击事件
    cancelBtn.onclick = function() {
        confirmDiv.style.display = "none";
    }
    
    // 确定按钮点击事件
    okBtn.onclick = function() {
        confirmDiv.style.display = "none";
        // 执行删除操作
        alert("删除成功！");
    }
}
</script>

<button onclick="deleteBlog()">删除博客</button>

ログイン後にコピー

このサンプルコードでは、confirmDiv という名前の DIV 要素を定義し、ページ内で非表示にします。ユーザーがブログの削除ボタンをクリックしたとき、Javascript を使用してconfirmDiv の表示を制御します。同時に、「OK」ボタンと「キャンセル」ボタンに対応するイベントトリガーを追加し、ユーザーがボタンをクリックしたときに対応する動作を実行できるようにしました。ボタンのイベントバインディングは、ページの読み込み時ではなく、deleteBlog 関数内にあることに注意してください。これにより、ページの読み込み時のイベントバインディングが減少し、ページのパフォーマンスが向上します。

4. コールバック関数

JavaScript の確認関数とキャンセル関数は通常同期しています。つまり、ユーザーがプロンプトボックスの確認ボタンまたはキャンセルボタンをクリックすると、操作はすぐに実行されます。。ただし、ユーザーが実行する操作に時間がかかる場合は、コールバック関数を使用する必要があります。

コールバック関数を使用すると、プロンプトボックスが閉じられた後に、ページ上の他の操作をブロックしないように、長時間実行される操作を実行できます。たとえば、次はコールバック関数を使用して確定キャンセル関数を実装するサンプルコードです。

function deleteBlog(callback) {
    var r = confirm("确定要删除这篇博客吗？");
    if (r == true) {
        setTimeout(function() {
            // 执行删除操作
            callback(true);
        }, 1000); // 延迟1秒执行删除操作
    } else {
        callback(false);
    }
}

deleteBlog(function(result) {
    if (result) {
        alert("删除成功！");
    } else {
        alert("删除失败！");
    }
});

ログイン後にコピー

このサンプルコードでは、コールバック関数をパラメータとして受け取る deleteBlog という名前の関数を定義します。ユーザーが [OK] ボタンをクリックすると、deleteBlog 関数は削除操作を 1 秒遅延し、削除操作の完了後にコールバック関数を呼び出し、実行結果をコールバック関数に渡します。ユーザーがキャンセルボタンをクリックすると、deleteBlog 関数はコールバック関数を直接実行し、実行結果をコールバック関数に渡します。この例では、alert メソッドを使用して削除結果を表示していますが、もちろん、関数の呼び出し元に削除結果を返し、削除結果に基づいて別のアクションを実行することもできます。

5. まとめ

この記事ではJavaScriptの確認キャンセル機能の実装方法を詳しく紹介します。まず、確定キャンセル機能の基本的な概念と原理を紹介し、次に Javascript を使用して確定キャンセル機能を実装する方法を説明し、CSS を使用してプロンプトボックスをカスタマイズする例を示しました。最後に、コールバック関数の概念と使用法について説明しました。確認/キャンセル機能は Web サイト開発で広く使用されており、ユーザーエクスペリエンスを向上させるだけでなく、ユーザーデータと Web サイトのセキュリティを保護することもできます。

以上がJavaScript確認キャンセルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。