Assign class using javascript only if there is something in input field

Question

Is there any way to assign class by using javascript when there is some values in input field (text field)

-- detailed --

Actually im using background watermark in the input field. So when someone click & type it on the input field then i will clear the background watermark image by css (using :focus selector).

In that way if he move to the next field then still the background watermark showing with the typed text (because onfocus is lift to the next field).

Anyone please?

If so i will make style to clear background watermark image using the class!

thecodeparadox · Accepted Answer · 2012-05-26 07:40:43Z

3

if($.trim($('input[type=text]').val()).length) {
  $(some_target).addClass('new_class');
}

.trim()

.val()

Complete code should look like following:

$('input[type=text]').on('keyup', function() {
  var targetInput = this; // keeping reference of input
  if($.trim(this.value).length) {
    // code for remove watermark
    $(targetInput).addClass('class_for_watermark');
  } else {
    // code for add watermark
    $(targetInput).removeClass('class_for_watermark');
  }
});

And you don't need to :focus css.

edited May 26, 2012 at 7:40

answered May 26, 2012 at 7:32

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pimvdb Over a year ago

+1, there is also .toggleClass which could simplify the if/else.

elclanrs · Accepted Answer · 2012-05-26 07:20:29Z

0

You mean this?

if ( $input.val() ) {
  // Has a value, do something
  $element.addClass('myClass');
}

answered May 26, 2012 at 7:20

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

1 Comment

Nimphious Over a year ago

Resolving the boolean state of an input's value could return false if the input is 0 or a string containing "0", "false", "null" or any other javascript value that is equal to false.

Collectives™ on Stack Overflow

Assign class using javascript only if there is something in input field

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related