Hide Element When Form Field Focus

Question

I am working on a web app for display on iPhone and when the form field becomes active, the nav (.nav-btns) at the bottom of my page gets in the way. I'd like to hide that element when any form element becomes in focus. Here's what I've currently tried with jquery, but no luck:

<script type="text/javascript">
$( document ).ready(function() {
$("select").is(":focus").hide(".nav-btns");
});
</script>

Maybe [this][1] post can help. It seems it's a webkit issue. [1]: http://stackoverflow.com/questions/3272089/programmatically-selecting-text-in-an-input-field-on-ios-devices-mobile-safari — Mojtaba Amiri, Sep 22 '13 at 22:59

shennan · Accepted Answer · 2013-09-23T01:40:22.800

5

How about:

$(function(){

  $('select').focus(function(){

    $(".nav-btns").hide();

  });
});

This should bind the focus event to all of your select elements, and then hide the element with the class .nav-btns.

For undoing the change on an 'unfocus':

$(function(){

  $('select').focus(function(){

    $(".nav-btns").hide();

  }).blur(function(){

    $(".nav-btns").show();

  });
});

edited Sep 23 '13 at 01:40

answered Sep 22 '13 at 22:25

shennan

10,798
5
44
79

This worked great. Any ideas how to make the element return once the select is no longer in focus? – chuckscoggins Sep 23 '13 at 01:22

Hide Element When Form Field Focus

1 Answers1