使用iPhone浏览器后键盘崩溃后如何触发自动缩小？

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:

使用iPhone上的浏览器,是否有一个元标记,我可以嵌入页面,以便在输入字段失去焦点后触发自动缩小到初始大小?我已经在使用这个元标记了:

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?

正如预期的那样,当用户点击输入字段并在那里输入文本时,它会放大文本字段。问题是,在提交表单后(我使用ajax来避免重绘页面)并且键盘崩溃,它不会缩小。使用javascript,HTML和/或元标记,如何在不重新加载整个页面的情况下将屏幕大小恢复为初始大小?

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

我已经在我的iPhone(版本6s +,6和5)上使用safari和firebox浏览器进行了测试。

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

请不要jquery。我只使用HTML和JavaScript。

1 个解决方案

#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.

没有jQuery版本。

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.

以下代码使用jQuery,但您可以使用vanilla javaScript。

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

#1