javascript - 密码字段获得焦点后启用表单登录按钮

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{
???
}

fiddle :

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 必须唯一。