0

こんにちはみんな私は、2 つの入力ユーザー名とパスワードと 1 つのボタンを持つログイン ページを持っています。パスワードフィールドに最初の文字が入力された後、そのボタンにクラスを配置したいのですが、どうすればいいですか、ありがとうございます。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

これは、「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

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が一意であることを確認してください..フィドルに同じ名前の2つの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
  }
});

ここをいじる

于 2013-01-23T08:44:24.767 に答える
1

Test this: http://jsfiddle.net/uGudk/33/

Please consider using unique id for all form elements, and use unique input name also.

$(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 に答える
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 
    <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 に答える