How to trigger automatically scaling back out after the keyboard collapses when using iPhone browser?

Question

Using a browser on iPhone, is there a meta tag I can embed in the page to trigger automatically scaling back out to the initial size after the input field loses focus? I'm already using this meta tag:

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"

and as expected, it zooms in on the text field when the user clicks on the input field and enters text there. The problem is, after the form is submitted (I'm using ajax to avoid redrawing the page) and the keyboard collapses, it doesn't zoom back out. Using javascript, HTML and/or meta tags, how can I get the screen size back to it's starting size without reloading the whole page?

I've tested using both safari and firebox browser on on my iPhone (versions 6s+, 6, and 5).

No jquery please. I'm only using HTML and javascript.

Answer 1

When your app loses focus, the blur event will be triggered. Blur is basically the opposite of focus. When this event gets triggered, you can add the meta tag to your document's body.

No jQuery version.

let $inputElement = document.getElementsByTagName('input');
$inputElement.addEventListener('blur', function() { 
    // Add your meta tag
});

The following code uses jQuery but you could do it with vanilla javaScript.

let $inputElement = $('input');
$inputElement.on('blur', function() {
    // Add your tag.
});