综合技术

Form login button enabled after password field has focus

hello guys I have a login page with two inputs username and password and one button. I want to put a class on that button after password field has first character filled in. How can I do that , Thank’s. If is possible to do that only with css will be awesome, or a small script to add a class on that button.

Username

Password

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/

Problem courtesy of: BurebistaRuler

Solution

You can use toggleClass
and keyup
methods.

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

Note that IDs must be unique
.

Solution courtesy of: undefined

Discussion

make sure your ID is unique.. since you have two IDs with the same name in fiddle.. i changed the password id to ‘password’…

use keyup()
to check the key pressed.. and addClass()
to add the class..

try this

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

fiddle here

Discussion courtesy of: bipen

You may try like this 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');
}   
        });   

    });

Discussion courtesy of: muthu

This is the best way to handle the entire input, with the “on()” Jquery method.
Use the very first parent

Username

Password

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

With “on” method you can handle many event of the input as you can see…

Discussion courtesy of: Claudio Ludovico Panetta

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

Discussion courtesy of: user1646111

            $('#YourTextBoxId').keyup(function (e) {
                if ($(this).val().length == 1) {
                    $(this).toggleClass("YourNewClassName");
                }
                else if ($(this).val().length == 0) {
                    $(this).toggleClass("YourOldClassName");
                }
            })
        

Discussion courtesy of: alok_dida

You can do that using javascript. FIrst thing you need to put on password input the following event

Password  

Then you define the javascript function:

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

Discussion courtesy of: Gabriel Lupu

This recipe can be found in it’s original form on Stack Over Flow
.

阅读原文...

CSS3 Recipes

一加要学习前辈“最后”才进击大陆市场?

上一篇

India tells its banks to get Windows XP off ATMs - next year!

下一篇

你也可能喜欢

评论已经被关闭。

插入图片
Form login button enabled after password field has focus

长按储存图像,分享给朋友