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]: stackoverflow.com/questions/3272089/… — Mojtaba Amiri
– Mojtaba Amiri, Commented Sep 22, 2013 at 22:59

shennan · Accepted Answer · 2013-09-23 01:40:22Z

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(); }); });

This worked great. Any ideas how to make the element return once the select is no longer in focus?

Collectives™ on Stack Overflow

Hide Element When Form Field Focus

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related