Jquery：瀏覽器填充文本框後啓動函數

Question

我爲登錄面板創建了一個服務器控件。 在此面板上，我有一個用於用戶名和密碼的文本框的文本框。 下方有登錄按鈕。

我希望按鈕被禁用，如果其中一個或兩個文本框都爲空。

爲此，我創建了一個函數來檢查文本框內容的長度。

function doCheck() 
{ 
    var lngth1 = document.getElementById('pnLogin_txtUserName').value.length; 
    var lngth2 = document.getElementById('pnLogin_txtPassword').value.length; 
    if (lngth1 > 0 && lngth2 > 0) 
     { 
     $('#pnLogin_btLogin').removeAttr('disabled'); 
     } else { 
     $('#pnLogin_btLogin').attr('disabled','disabled'); 
     } 
} 

我在開始和每個keyup事件中運行此函數。 這很好。

問題是當瀏覽器啓動頁面時。如果它們被存儲，它將填入用戶名和密碼。 然後運行該功能時，即使文本框中有信息，仍會禁用該按鈕。

我嘗試這樣做：

setTimeout(function() 
{ 
    doCheck(); 
}, 2000); 

但2秒後我看到按鈕禁用，而看到我的憑證填寫

如果我檢查Chrome中的元素，我看不到我的憑據。在html代碼中。 那麼它存儲在哪裏？我如何檢測這個？

Answer 1

您不會在html中看到這些值，因爲它們實際上並不在DOM中。

您可以使用$("#pnLogin_txtUserName").val()和 $("#pnLogin_txtPassword").val()訪問它們的值。

我會簡化你的功能，並使用jQuery特定的語法，而不是原生的JavaScript。

function doCheck() { 
    var lngth1 = $("#pnLogin_txtUserName").val().length; 
    var lngth2 = $("#pnLogin_txtPassword").val().length; 
    if (lngth1 > 0 && lngth2 > 0) { 
    $('#pnLogin_btLogin').prop('disabled', false); 
    } else { 
    $('#pnLogin_btLogin').prop('disabled', true); 
    } 
} 

我也改變你的代碼從.attr到.prop禁用輸入。使用this stackoverflow question

查找更多信息問題出在瀏覽器以頁面開始時。如果它們被存儲，它將填入用戶名和密碼。當該函數運行時，即使文本框中有信息，它仍會禁用該按鈕。

您的代碼在瀏覽器加載和解析時執行。正確的jQuery方法是使用叫做.ready()的東西，它會在jQuery檢測到頁面加載完成後執行。

$(document).ready(function() { 
    doCheck(); 
}); 

或多個簡化到：

$(function() { 
    doCheck(); 
}); 

檢測變化

我們可以發現，當值獲得通過綁定改變事件偵聽器：

$("pnLogin_txtUserName").change(function() { 
    console.log('pnLogin_txtUserName has changed', $(this).val()); 
}); 

如果我們添加一個類到你的輸入中，比如.loginElements ，那麼我們會更容易一些，並檢測幾個不同的事件：

$(".loginElements").on('change keypress', function() { 
    doCheck(); 
});