4

I have a simple iOS web app question.

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.

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 )

MMA
  • 525
  • 2
  • 10
  • 19

2 Answers2

7

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.

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;

Edit: 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
);
Malcolm Dwyer
  • 1,145
  • 8
  • 9
  • 1
    Thanks, this helped an odd issue I was having when the iOS popup keyboard shifted the web view over slightly when closing and reopening the keyboard. – V_H Aug 30 '11 at 19:43
0

The easiest way is to set "tabindex=0" on any div on top of page.

VictoriaSh
  • 322
  • 3
  • 10