首頁  >  文章  >  web前端  >  如何根據文字欄位輸入啟用/停用 jQuery 提交按鈕?

如何根據文字欄位輸入啟用/停用 jQuery 提交按鈕?

Barbara Streisand
Barbara Streisand原創
2024-11-06 15:26:02893瀏覽

How to Enable/Disable a jQuery Submit Button Based on Text Field Input?

根據文字欄位輸入停用和啟用jQuery 提交按鈕

如果您需要提交按鈕,當對應的文字欄位為空並變為非活動狀態時,此提交按鈕將處於非活動狀態輸入文字後處於活動狀態,以下步驟提供了可靠的解決方案:

  1. 首先停用提交按鈕:

    $(document).ready(function() {
        $(':input[type="submit"]').prop('disabled', true);
    });
  2. 使用keyup 事件監視文字欄位變更:

    $('input[type="text"]').keyup(function() {
        // Check if the text field is not empty
        if($(this).val() != '') {
            // Enable the submit button
            $(':input[type="submit"]').prop('disabled', false);
        } else {
            // Disable the submit button
            $(':input[type="submit"]').prop('disabled', true);
        }
    });
  3. 避免更改事件(選用):
    更改事件在以下情況下觸發焦點從輸入欄位移開,這可能不是這種情況下所需的行為。使用 keyup 可以確保按鈕在釋放按鍵後立即對輸入值做出反應,即使焦點仍位於該欄位上也是如此。

以上是如何根據文字欄位輸入啟用/停用 jQuery 提交按鈕?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn