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()和\ n来访问其值 $("#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()的whats，它将在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();
});

Jquery：浏览器填充文本框后启动功能

1 个答案: