Question

大家好我有一个登录页面，其中包含两个输入用户名和密码以及一个按钮。我想在密码字段填写第一个字符后在该按钮上放一个类。我怎么能这样做，谢谢。如果可以这样做只有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/

Answer 1

您可以使用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必须唯一。

Answer 2

你可以使用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');
    }
}

Answer 3

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

使用keyup()检查按下的键..以及addClass()添加类..

试试这个

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

fiddle here

Answer 4

您可以尝试这样demo

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

    });

Answer 5

这是使用“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”方法，您可以看到输入的许多事件......

Answer 6

    <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>

Answer 7

测试一下： 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");
       }
    });   
});

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

7 个答案: