Disable scrolling when changing focus form elements ipad web app

user_607569 0
Viewed 76828

I have a web app. I'm trying to disable/prevent the scrolling that occurs when you focus on different form inputs (i.e. the scrolling that occurs as you advance through input elements in a form).

I've already disabled scrolling with this: 

 <script type="text/javascript">
     $(document).ready(function() {
         document.ontouchmove = function(e){
              e.preventDefault();
              }
     });
 </script>

To add a little more info - I have a few "slides" that my page consists of. Each are 768x1024 and they are "stacked" on the page (i.e. the page is 768x3072 [1024*3=3072]) and when you click a link I'm using scrollTo jquery plugin to scroll to the next "slide" and .focus() on an input element.

Does anyone know how to do this?

ipad safari scroll forms jquery
12 Answers

For whatever reason, it appears you can mitigate this by applying a keyframe animation to an autoFocused input container. 

function App() {
  const [isSearching, setIsSearching] = useState(false);

  return (
    <FixedContainer>
      {isSearching && (
        <Box>
          <Input autoFocus type="text" placeholder="click me" onBlur={() => setIsSearching(false)} />
        </Box>
      )}
    </FixedContainer>
  )
}

const fadeInKeyframes = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;

const Box = styled.div`
  animation-name: ${fadeInKeyframes};
  animation-duration: 0.1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
`;

https://stackblitz.com/edit/react-ios-input-scroll

Working example: https://react-ios-input-scroll.stackblitz.io

user_58795190

In case you are developing a mobile webapp with cordova, there is a plugin for that:

The plugin that solved the problem for me was the Telerik Keyboard Plugin. It is using the basic UIWebView. Install the plugin

cordova plugin add ionic-plugin-keyboard

And call this command after your app loaded:

cordova.plugins.Keyboard.disableScroll(true);

In case you are using the WKWebView, you can use e.g. this plugin

user_11750810

To "focus" without any scroll, you may use select. select by default will select all of the text inside an input. To mimic focus behavior and have the caret at the end of the input you can use:

var myInput = document.getElementById('my-input');
var length = myInput.value.length;  // Or determine the value of length any other way
myInput.select();
myInput.setSelectionRange(length, length);
user_18986880
user_74054520
Related