Question

Here’s the dilema, I have a webpage (only for android devices) and in that page I have an input box (a text box specifically) and when it gets focus the browser zooms in. I don’t want it to zoom in – sounds easy, right?

Here’s where it gets fun: I have to be able to zoom in general so don’t say

<meta name='viewport' content='user-scalable=0'>

That won’t work for me.

Also, the input box doesn’t receive click events. It appears when another button is clicked a gets focus programmatically.

Here’s what I’ve tried and they’ve failed so far:

jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />');
jQuery("#locationLock input").focus();
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />');

This also failed:

<input type='text' onfocus="return false">

And this:

jQuery("#locationLock input").focus(function(e){e.preventDefault();});

Any ideas?

Answer 1

Not possible!

I’ve got some bad news for you all. It’s now been 6 months and no one has correctly answered the question.

Also I’ve finished working on that project and employer.

I’m afraid to say it, but exactly what I asked for is impossible. Sorry peoples. But I’m going to leave the question alive so people can see the other options.