Hiding an element when they keyboard is showing

For mobile user, I show a local ad (300x50) at the bottom of the viewport. But when they click on an input, textarea, or contenteditable DIV to enter something and the keyboard comes up, the majority of the input area is hidden by the remainder of the viewport.

Can you guys suggest the best way to hide this local ad when they keyboard is up?

I'm using jQuery and I'm thinking along these lines (hiding the element when an input, textarea, or contenteditable is in focus), but I'm not sure about the performance or if the contenteditable test is right...

$(function() {
 // HIDE
 $('input').on('focus', function() {
  $('#local_banner').hide();
 });

 $('textarea').on('focus', function() {
  $('#local_banner').hide();
 });

 // I'm not sure about this chain...
 $('div').is("[contentEditable='true']").on('focus', function() {
  $('#local_banner').hide();
 });

 // SHOW
 $('input').on('blur', function() {
  $('#local_banner').show();
 });

 $('textarea').on('blur', function() {
  $('#local_banner').show();
 });

 // I'm not sure about this chain...
 $('div').is("[contentEditable='true']").on('blur', function() {
  $('#local_banner').show();
 });
});