Trying to show element based on whether or not a specific input field has focus

Question

As the title says, I'm trying to figure out how I can show a element based on whether or not a input field has focus our not.

So when the specific input field has focus I need to show a element, and when it has no focus the element should be hidden.

I've tried a lot of different things, and this is my lates try:

    <script>
     $(".only-oslo-delivery").hide();

     if ($("#address_city").is(":focus")) {
      $(".only-oslo-delivery").show();
     };
    </script>

only-oslo-delivery is a < p > tag with the text I want to display when the input field has focus.

address_city is the ID of the input field.

T J · Accepted Answer · 2016-05-25 09:51:01Z

1

Your code only runs once, you need event handler to execute it as per user actions:

$("#address_city").on('focus', function() {
  $(".only-oslo-delivery").show();
}).on('blur', function() {
  $(".only-oslo-delivery").hide();
})

.only-oslo-delivery {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="address_city">
<p class="only-oslo-delivery">test</p>

edited May 25, 2016 at 9:51

answered May 25, 2016 at 9:48

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

1 Comment

Hamza Nebolsi Over a year ago

Thank you, that was exactly what I was looking for. I didn't know I needed blur as well. I'm very new to jquery/javascript.

Joey Ciechanowicz · Accepted Answer · 2016-05-25 09:51:26Z

0

You can bind events to your button to show/hide the .only-oslo-delivery element when it is focused and blurred.

$('#address_city').focus(function() {
  $('.only-oslo-delivery').show();
}).blur(function() {
  $('.only-oslo-delivery').hide();
});

Interestingly if the elements are next to each other on the page you could use adjacent css rules to accomplish this without any javascript.

<input type="text" id="address_city">
<p class="only-oslo-deliver">...</p>

And then use the following css:

.only-oslo-delivery {
   display: none;
}
#address_city:focus~.only-oslo-delivery {
   display: block;
}

answered May 25, 2016 at 9:51

Joey Ciechanowicz

3,6733 gold badges30 silver badges49 bronze badges

Comments

Jitendra Joshi · Accepted Answer · 2016-05-25 09:53:20Z

0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="address_city">
<p class="only-oslo-delivery">test</p>

.only-oslo-delivery {
  display: none;
}

$("#address_city").on('focus', function() {
  $(".only-oslo-delivery").show();
}).on('blur', function() {
  $(".only-oslo-delivery").hide();
})

answered May 25, 2016 at 9:53

Jitendra Joshi

785 bronze badges

Comments

Jai · Accepted Answer · 2016-05-25 09:54:48Z

0

You need to use focus event to show and blur to hide:

$("#address_city").on('focus blur', function(e) {
  $(".only-oslo-delivery").toggle($('#address_city').is(':focus') && e.type === 'focus');
});

.only-oslo-delivery {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='address_city'>
<p class='only-oslo-delivery'>only-oslo-delivery</p>

.toggle(true/false) would show when true and hide when false.

answered May 25, 2016 at 9:54

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Rudi · Accepted Answer · 2016-05-25 10:06:19Z

0

Here is another way:

var $field = $('#address_city');
var $info = $('.only-oslo-delivery').hide();

$field.on('focus blur', function (e) {
  $info.toggle(e.type === 'focus');
});

answered May 25, 2016 at 10:06

Rudi

2,9851 gold badge14 silver badges18 bronze badges

Collectives™ on Stack Overflow

Trying to show element based on whether or not a specific input field has focus

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related