iOS网络应用程序：在输入文本字段上禁用自动对焦 [英] iOS web app: disable autofocus on input text field

问题描述

我有一个简单的iOS网络应用程序问题。

I have a simple iOS web app question.

当您创建输入文本字段时，用户点击文本字段，移动safari将自动聚焦输入字段，自动将用户单击的输入字段移动到屏幕的中心。视觉键盘将画布推到顶部或左侧，或者任何可以使输入字段居中的空间。

When you create the input text field, users click on the text field, mobile safari will autofocus the input field, auto move the user clicked input field into the center of the screen. The visual keyboard pushed the canvas to the top or the left or whatever the space where they can center the input field.

好吧，我想要做的是禁用自动对焦在输入字段上，以便用户单击输入字段，画布不会移动或动画，画布保持在屏幕上像固定的，可视键盘可能重叠输入字段（尝试通过Javascript或CSS实现）

Well, what I am trying to do is disable the autofocus on the input field so that users click on the input field, the canvas does not move or animate at all, canvas stay on the screen like fixed, and the visual keyboard may overlap the input fields.( Trying to achieve by Javascript or CSS )

推荐答案

我之前遇到过这个问题，一个固定大小的webapp（专为iPad）

I've had this problem before where a fixed size webapp (built for iPad) gets partially scrolled out of view by the browser because it tries to center the text-field in the view.

设置位置：固定表单的父元素之一防止这种情况。 ' position：absolute '允许移动。根据您的布局，将表单设置为 position：fixed 可能会有帮助。

Setting 'position:fixed' on one of the form's parent elements prevents this. 'position:absolute' allows the movement. Depending on your layout, setting your form to 'position:fixed' may help you.

position: fixed;

---

编辑：在固定大小的iOS webapp上：当文本字段处于活动状态时，如果用户拖动手指，可能会在屏幕上移动整个固定元素（基本上滚动一个您不打算滚动的UI） 。如果发生这种情况，您可以向表单添加touchmove事件处理程序，并阻止默认操作。

---

One more related thing for handling a form on a fix-sized iOS webapp: When the text field is active, if the user drags their finger it may be possible to move the whole fixed element around on the screen (basically scroll a UI that you didn't intend to be scrollable). If you find that happening, you can add a touchmove event handler to the form and prevent the default action.

//jQuery:
$('#myForm').bind('touchmove', function(ev) { ev.preventDefault(); });
// Or not:
document.getElementById('myForm').addEventListener(
    "touchmove",
    function(ev) {
        ev.preventDefault();
    },
    false
);

这篇关于iOS网络应用程序：在输入文本字段上禁用自动对焦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！