CODEWITHSUNDEEP
jquery
Adam
Adam

Reputation: 1459

jQuery if statement - More than one character or focus

I have this code but am not why it isn't working.

I have an input which shows some text. I want this text to show when one of either the following criteria has been met:

Currently only the first point works, what am I doing wrong?

Here is the link to the codepen demo and actual code below

HTML

<label for="password">Password</label>
<input type="password" id="password">
<span class="show">SHOW</span>

CSS

.show {
   font-size: 14px;
   display: none;
   transition: all 0.2s ease;
}

jQuery

$('input').on('input', function(){
            if ($(this).val().length > 0), ($(this).is(":focus")) {
                $(this).siblings('.show').fadeIn();
            } else {
                  $(this).siblings('.show').fadeOut();
            }
        });

Upvotes: 2

Views: 333

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337637

Firstly, note that your if statement is not using valid JS syntax. You need to include a logical operator between the statements; they are not separate arguments.

To achieve your requirements you should split the events in to two, an input to check the length of the value, and a focus to know when the input is in use.

Also note that you should remove the transition rule from your CSS as it will interfere with the jQuery animation. Try this:

$('input').on('input', function() {
  $(this).siblings('.show')[$(this).val().length > 0 ? 'fadeIn' : 'fadeOut']();
});

$('input').on('focus', function() {
  $(this).siblings('.show').fadeIn();
});
.show {
  font-size: 14px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="password">Password</label>
<input type="password" id="password">
<span class="show">SHOW</span>

Upvotes: 2

Related Questions