2

I have created a demo (not in Jsfiddle, couldn't get it to work in device):

http://i283951.iris.fhict.nl/test.html

When I open this on my iPad and scroll down all the way and then click on the input, it scrolls all the way up to the top and then shows the keyboard.

I'm pretty sure this also happens with a iPhone, on my android I don't have those problems. So I think it's iOs related.

body {
  margin: 0;
  padding: 0;
  height: 2000px;
}
.top {
  width: 100%;
  height: 50px;
  position: fixed;
  background-color: #AA3939;
}
.input-group {
  margin-top: 12px;
  margin-left: 50px;
}
<html>

<head>

</head>

<body>
  <div class="top">
    <div class="input-group">
      <input type="search" placeholder="Search...">
      <button type="submit">Submit</button>
    </div>
  </div>
</body>

</html>
chirag
  • 1,761
  • 1
  • 17
  • 33
C.Ronaldo
  • 593
  • 1
  • 6
  • 25

1 Answers1

0

I think you could maybe prevent this by using the same like described here: https://stackoverflow.com/a/7771215/1501847

For a web/html app running inside iOS Safari you want something like

document.ontouchmove = function(event){
event.preventDefault();

}

Community
  • 1
  • 1
zero3nna
  • 2,770
  • 30
  • 28
  • Hi thnx for reply, where should I place this code? Cause when I place it at the top, I can't scroll anymore (which is probably what it does). But I don't think I can't combine it with focus. – C.Ronaldo Sep 23 '16 at 14:42
  • I think it's easier to use this nearly same, but with jquery: 'jQuery('input-group.input').bind('focusin focus', function(e){ e.preventDefault(); })' – zero3nna Sep 23 '16 at 14:54
  • Is 'focusin focus' a typo? Cause now it doesn't do anything anymore. – C.Ronaldo Sep 23 '16 at 15:00
  • have you imported the jquery Library for JS? – zero3nna Sep 23 '16 at 15:03
  • Yup, I'm using it for other jQuery code too. Also 'focusin' is underlined in my programme, I think it doesn't exist. – C.Ronaldo Sep 23 '16 at 15:04
  • well i think the problem is the 'input-group.input' ... try using just 'input' but it will affect any input flied then. you can give your input a class and use 'input.' then – zero3nna Sep 23 '16 at 15:06
  • I'am using var $input = $header.find('input[type=search]'); and $input.focus() is working. – C.Ronaldo Sep 23 '16 at 15:07
  • http://stackoverflow.com/questions/6740253/disable-scrolling-when-changing-focus-form-elements-ipad-web-app – zero3nna Sep 23 '16 at 15:09