javascript - 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'); 
      } 
}

我在开始时和每次按键事件时运行此函数。效果很好。

问题出在浏览器启动页面时。如果存储了用户名和密码，则会填写它们。当该函数运行时，即使文本框中有信息，它仍然会禁用该按钮。

我尝试过这个:

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

但是 2 秒后，我看到按钮被禁用，同时看到我的凭据已填写。

如果我在 Chrome 中检查该元素，我在 html 代码中看不到我的凭据。那么它存储在哪里呢？我怎样才能检测到这一点？

Answer 1

您不会在 html 中看到这些值，因为它们实际上并不在 DOM 中。

您可以使用 $("#pnLogin_txtUserName").val() 访问它们的值$("#pnLogin_txtPassword").val()。

我会简化你的功能并使用 jQuery 特定语法而不是 native 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 查找更多信息

The problem is when the browser starts with the page. It fills in the username and password if they are stored. When the function is then run, it still disables the button even though there is information in the textboxes.

您的代码在浏览器加载和解析时就会被执行。正确的 jQuery 方法是使用所谓的 .ready() ，它将在 jQuery 检测到页面已完成加载后执行。

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

或者更简化为:

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

检测变化

我们可以通过绑定(bind)事件监听器来检测值何时发生更改:

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

如果我们向您的输入添加一个类，例如.loginElements，那么我们的工作会更容易一些并检测几个不同的事件:

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