Skip to content Skip to sidebar Skip to footer

Prevent Safari (iphone) To Show An Url Bar On Form Input

I have found several javascript fixes to hide the Safari URL bar, great. However it seems that form input fields tend to toggle it visible again if you've hidden it previously.. Is

Solution 1:

Found a fix..

setTimeout(function () {
    window.scrollTo(0, 1);
}, 500);

$(document).ready(function(){
    $('input').click(function(){
        window.scrollTo(0,0);
    });

stops the input behaviour..

Solution 2:

I've found another solution

$('body')
    .on('touchstart', 'input', function(e) {
        e.target.focus();
        returnfalse;
    })
    .on('focus', 'input', function() {
        window.scrollTo(0, 0);
        returnfalse;
    });

Address bar doesn't show at all with this code

Solution 3:

It took me a lot of time to figure out the solution. You can try setting the body position to fixed. For me it worked both in safari and chrome in iOS.

document.getElementsByTagName('body')[0].style.position = 'fixed';

And when u don't need it anymore:

document.getElementsByTagName('body')[0].style.position = 'relative';

My use case: I have to show the addressbar when I make some div full screen and then go back to normal flow when its minimized.

Post a Comment for "Prevent Safari (iphone) To Show An Url Bar On Form Input"