0

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

4

7 回答 7

2

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

于 2013-01-23T08:44:04.457 回答
1

您可以使用 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');
    }
}
于 2013-01-23T08:42:34.327 回答
1

确保您的 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
  }
});

在这里摆弄

于 2013-01-23T08:44:24.767 回答
1

你可以试试这个演示

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

    });
于 2013-01-23T08:45:48.967 回答
1

这是处理整个输入的最佳方式，使用“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”方法，您可以处理许多输入事件，如您所见......

于 2013-01-23T08:47:17.577 回答
1 
    <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>
于 2013-01-23T08:53:26.853 回答
1

对此进行测试：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");
       }
    });   
});
于 2013-01-23T09:07:50.967 回答