.blur（）上的jQuery .hide（）在iOS Web应用程序中不起作用

Question

I have a web app which hides the bottom toolbar while typing to stop it going on top of the keyboard.

$(document).ready( function() {
    $("#open").focus( function() {
        $('#bottom').hide();
    });
    $("#open").blur( function() {
        $('#bottom').show();
        check();
    });
});

$('#open'); is an <input> box.

Instead of hiding, the lower bar stays. The text 'loading' also appears beneath (for some reason). This is especially strange as I can't find it in the DOM when inspecting on my computer.

Link: www.scriptr.net/webapp

Answer 1

Try listening to a different ready event for mobile. Something like this

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


function onReady() {
   $("#open").focus( function() {
       $('#bottom').hide();
   });

   $("#open").blur( function() {
       $('#bottom').show();
       check();
   });
}

Answer 2

just put this code on deviceReady function, work for me

 document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});
                                        function isTextInput(node) {
                                        return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
                                        }

                                        document.addEventListener('touchstart', function(e) {
                                                                  if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
                                                                  document.activeElement.blur();
                                                                  }
                                                                  }, false);