jQuery Mobile selectmenu focus and blur event won't fire

Question

I am trying to hide a footer when a form element is given focus. I also want to show a footer when a form element loses focus, which the blur event should handle. I can't get the focus or blur event to fire on a jQuery Mobile selectmenu form element.

Here is an example of one of my form elements -

<select id="radiology-study-provider" class="selectList"></select>

Here is the jQuery code that is supposed to hide my footer on focus and show it on blur (it is inside DOM ready) -

  $('.selectList').change(function(){
      console.log("the change event is firing");
  });
  $('.selectList').focus(function(){
      $('div:jqmData(role="footer")').hide(); // hide the footer
  });
  $('.selectList').blur(function(){
      $('div:jqmData(role="footer")').show(); // show the footer
  });

It is strange that the change event handler fires but focus and blur will not.

I have tried this below and it won't work -

  $('.selectList').on('focus', function(){
      $('div:jqmData(role="footer")').hide(); // hide the footer
  });
  $('.selectList').on('blur', function(){
      $('div:jqmData(role="footer")').show(); // show the footer
  });

I also tried this -

   $('.selectList').bind( "focus", function(event, ui) {
       $('div:jqmData(role="footer")').hide(); // hide the footer
  });
   $('.selectList').bind( "blur", function(event, ui) {
       $('div:jqmData(role="footer")').hide(); // hide the footer
  });

I also tried the focusin() and focusout() events with no luck either. I tried dozens of selectors (div.ui-select was one of them). I don't think it is an issue with the selector I am using.

I am using jQuery Mobile 1.1.0 and jQuery 1.7.1 - I have checked the jQuery Mobile selectmenu documentation at http://jquerymobile.com/test/docs/forms/selects/events.html, talked to the google, searched here, and can't find this issue out.

Hey mate, does your change method `$('.selectList').change` work at least? — Littm, Sep 21 '12 at 06:35

score 4 · Accepted Answer · edited May 23 '17 at 12:24

This is what ended up working for me.

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady () {
    document.addEventListener("hidekeyboard", onKeyboardHide, false);
    document.addEventListener("showkeyboard", onKeyboardShow, false);

}

function onKeyboardHide() {
    $('div:jqmData(role="footer")').show(); // show the footer
}

function onKeyboardShow() {
    $('div:jqmData(role="footer")').hide(); // hide the footer
}

I came across this here on stack - Show hide keyboard is not working propery in android phonegap and noticed there are those 2 events you can listen for.

score 1 · Answer 2 · answered Sep 21 '12 at 06:01

Try commenting out the focus event and try.. Sometimes when the focus event fires it is fired multiple times because of which you don't see the code that is executed...

$('.selectList').change(function(){
      alert("the change event is firing");
  });

 // $('.selectList').focus(function(){
 //    $('div:jqmData(role="footer")').hide(); // hide the footer
 //    alert("Focus event is firing");
 // });

  $('.selectList').blur(function(){
      //$('div:jqmData(role="footer")').show(); // show the footer
      alert("Blur event is firing");
  });

I commented out the focus event and the other two events seem to fire.. Remove the comments and you see the focus event getting fired multiple times..

Check FIDDLE

Thank you for your suggestion. Unfortunately the blur event won't fire. I need to somehow know when the android keyboard is present and this is possible by the focus and blur event handlers on form elements. — Ross, Sep 21 '12 at 06:24

score 1 · Answer 3 · answered Sep 21 '12 at 07:48

This worked for me using the following example:

JS:

<script>
    document.addEventListener("deviceready", function(){}, false);

    $(function() {
        $('.selectList').change(function(){
            console.log("the change event is firing");                                      
        });

        $('.selectList').focus(function(){
            console.log("FOCUS");
            $('#my_footer').hide(); // hide the footer
        });

        $('.selectList').focusout(function(){
            console.log("FOCUS OUT");
            $('#my_footer').show(); // show the footer
        });
    });
</script>

where #my_footer is the id of my footer (check the HTML below).

HTML:

<body>
    <div data-role="page">
        <div data-role="content">

            <select id="radiology-study-provider" class="selectList">
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">C</option> 
            </select>

        </div>
    </div>
</body>

You may have a try at this example and see if this works for you mate :S

Hope this helps. Let me know about your results.

Thank you so much for your help. Once again though, only the change event wanted to fire. I figured out a solution though, I'm going to post what worked for me. — Ross, Sep 21 '12 at 08:30
Your welcome mate :). I'm curious to see what was the problem :S... I'll be waiting for your solution :P — Littm, Sep 21 '12 at 08:32
I gotta wait 5 more hours to self-answer because I have less than 10 reputation. I'll post it up here tomorrow. Thank you again. — Ross, Sep 21 '12 at 08:37

jQuery Mobile selectmenu focus and blur event won't fire

3 Answers3