在密码字段具有焦点后启用表单登录按钮

Form login button enabled after password field has focus

本文关键字：启用 表单 登录 按钮 焦点 密码 字段      更新时间：2023-09-26

大家好，我有一个登录页面，有两个输入用户名和密码以及一个按钮。我想在密码字段填写第一个字符后在该按钮上放置一个类。我怎么能做到这一点，谢谢。如果可以做到这一点，只有用css会很棒，或者一个小脚本可以在该按钮上添加一个类。

<form>
   Username  <input type="text" name="first" id="first" /><br/><br/>
   Password  <input type="text" name="last" id="last" />
    <br/>
</form>
<input class="crbl" type="submit" name="last" id="last" value="login button" />

.css

/*Normal State*/
.crbl{
    margin-top:10px;
   border:1px solid #555555;
    border-radius:5px;
}
/*after password field has one character filled in state*/
.class{
???
}

小提琴：

http://jsfiddle.net/uGudk/16/

您可以使用

toggleClass和keyup方法。

// caching the object for avoiding unnecessary DOM traversing. 
var $login = $('.crbl'); 
$('#last').keyup(function(){
   $login.toggleClass('className', this.value.length > 0);
});

http://jsfiddle.net/5eYN5/

请注意，ID 必须是唯一的。

你可以使用 javascript 来做到这一点。您需要在密码输入上输入以下事件的第一件事 

Password  <input type="text" name="last" id="last" onkeyup="myFunction(this);"/>

然后你定义javascript函数：

function myFunction(element) {
    if (element.value != '') {
         document.getElementById('last').attr('class','password-1');
    } else {
         document.getElementById('last').attr('class','password-0');
    }
}

你可以像这个演示一样尝试

 jQuery(document).ready(function(){
        jQuery('#last').keyup(function(event){
            var password_length =jQuery("#last").val().length;
            if(password_length >= 1){
           jQuery("#last_button").addClass('someclass');
            }
else
{
jQuery("#last_button").removeClass('someclass');
}   
        });   
    });

这是使用 "on（）" Jquery 方法处理整个输入的最佳方式。使用第一个父项 

 <form id="former">
   Username  <input type="text" name="first" id="first" /><br/><br/>
   Password  <input type="text" name="last" id="last" />
    <br/>
</form>
<input class="crbl" type="submit" name="last" id="last_btn" value="login button" />

然后在Jquery中

$("#former").on('keydown, keyup, keypress','#last',function(e){
    var value = $(this).val();
    if ( value.length > 0 ) {
        $("#last_btn").addClass('class'):
    }else{
        $("#last_btn").removeClass('class');
    }
});

使用"on"方法，您可以处理输入的许多事件，如您所见...

请确保您

的ID是唯一的..因为您在小提琴中有两个同名的ID..我将密码ID更改为"密码"...

使用keyup()检查按下的键，addClass()添加类。

试试这个

$('#password').keyup(function(){
  if($(this).val()==''){
    $('#last').removeClass('newclassname'); //if empty remove the class
  }else{
    $('#last').addClass('newclassname');  // not not empty add
  }
});

在这里摆弄

    <script type="text/javascript">
            $('#YourTextBoxId').keyup(function (e) {
                if ($(this).val().length == 1) {
                    $(this).toggleClass("YourNewClassName");
                }
                else if ($(this).val().length == 0) {
                    $(this).toggleClass("YourOldClassName");
                }
            })
        </script>

测试这个：http://jsfiddle.net/uGudk/33/

请考虑对所有表单元素使用唯一 ID，并同时使用唯一的输入名称。

$(document).ready(function(){
   $("input[name=last]").keydown(function () {
       if($(this).val().length > 0){
          $(this).attr("class", "class");
           //or change the submit button
           $("input[type=submit]").attr("class", "class");
           //or if you want to enable it if originally disbaled
           $("input[type=submit]").removeAttr("disabled");
       }
    });   
});
相关文章：