Form login button enabled after password field has focus

综合技术 2018-06-25 阅读原文

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.




/*Normal State*/
   border:1px solid #555555;
/*after password field has one character filled in state*/


Problem courtesy of: BurebistaRuler


You can use toggleClass
and keyup

// caching the object for avoiding unnecessary DOM traversing. 
var $login = $('.crbl'); 
   $login.toggleClass('className', this.value.length > 0);

Note that IDs must be unique

Solution courtesy of: undefined


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

    $('#last').removeClass('newclassname'); //if empty remove the class
    $('#last').addClass('newclassname');  // not not empty add

fiddle here

Discussion courtesy of: bipen

You may try like this demo

            var password_length =jQuery("#last").val().length;
            if(password_length >= 1){


Discussion courtesy of: muthu

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



Then in Jquery

$("#former").on('keydown, keyup, keypress','#last',function(e){
    var value = $(this).val();
    if ( value.length > 0 ) {

With "on" method you can handle many event of the input as you can see...

Discussion courtesy of: Claudio Ludovico Panetta

Test this:

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

   $("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

Discussion courtesy of: user1646111

            $('#YourTextBoxId').keyup(function (e) {
                if ($(this).val().length == 1) {
                else if ($(this).val().length == 0) {

Discussion courtesy of: alok_dida

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


Then you define the javascript function:

function myFunction(element) {
    if (element.value != '') {
    } else {

Discussion courtesy of: Gabriel Lupu

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

CSS3 Recipes

责编内容by:CSS3 Recipes阅读原文】。感谢您的支持!


Jquery same height according to another height of ... Hello i have a problem how to make height of all divs always same height (with class .height-fix) depending on content. Simply if i add more content t...
Jquery Recover data from the web page and enter it... Recover data from the database I want to retrieve some data from the database and I have a problem private void BindGrid() { str...
JQuery performance: hide (&... I have multiple dropdown boxes which drop when their link is clicked. The boxes have the possibility to overlap if they are open at the same time. ...
JQuery Mouseover DOM I have a number of elements (the total number of which I do not know). I want something to appear when I mouse-over any one of these elements (which ...
JQuery .click () work... I have a piece of JavaScript that dynamically creates an A tag inside of an existing div and then calls the jQuery function "click" on it. This...