avesus.github.io

<!DOCTYPE html>
<html style="height: 100%">
<head>
  <title>iOS Keep Fixed on Input Focus</title>
  <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <style>
    #window {
      position: relative;
      box-sizing: border-box;
      border: 1px solid red;
      overflow: hidden;
      height: 100%;
    }

    input {
      /* Safari zooms page in if font size is less than 16px */
      font-size: 16px;
      margin: 20px 0px;
      height: 20px;
    }
  </style>

  <meta name="robots" content="noindex, follow">
  <!-- greenforest:share-metadata:start -->
  <!-- greenforest:preview-source:none -->
  <meta name="description" content="iOS Keep Fixed on Input Focus on Greenforest I/O.">
  <link rel="canonical" href="https://greenforest.io/docs/ios-keep-fixed-on-input-focus.html">
  <meta property="og:site_name" content="Greenforest I/O">
  <meta property="og:title" content="iOS Keep Fixed on Input Focus">
  <meta property="og:description" content="iOS Keep Fixed on Input Focus on Greenforest I/O.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://greenforest.io/docs/ios-keep-fixed-on-input-focus.html">
  <meta property="og:image" content="https://greenforest.io/social-previews/docs/ios-keep-fixed-on-input-focus.png">
  <meta property="og:image:secure_url" content="https://greenforest.io/social-previews/docs/ios-keep-fixed-on-input-focus.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="iOS Keep Fixed on Input Focus - Greenforest I/O share preview">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="https://greenforest.io/social-previews/docs/ios-keep-fixed-on-input-focus.png">
  <meta name="twitter:image:alt" content="iOS Keep Fixed on Input Focus - Greenforest I/O share preview">
  <script src="/site-analytics.js" defer></script>
  <!-- greenforest:share-metadata:end -->
  <script>
    var self = {};
    // Move input box to the bottom of page to force Safari
    // scroll window to obtain exact height of the visible area
    function onInputClick (event) {
      self.heightWas = window.innerHeight;
      event.preventDefault();
      event.stopPropagation();
      var input = event.target;
      input.style.height = '1px';
      input.style.bottom = '0px';
      input.style.position = 'absolute';
      input.focus();
    }
    
    // Restore input box position and height after focus (and scroll on iOS!) happens
    function onInputFocus (event) {
      self.focus = true;
      var input = event.target;
      input.style.height = '20px';
      input.style.position = null;
      input.style.bottom = null;
    }
    
    // Restore container's height after unfocusing
    function onDocumentBlur (event) {
      self.focus = false;
      if (self.focusPatchApplied) {
        self.focusPatchApplied = false;
        var style = document.getElementById('window').style;
        style.height = self.heightWas + 'px';
        style.top = '0px';
        window.scrollTo(0, 0);
      }
    }

    // Change container's height and vertical offset after iOS scrolls it on input box focus
    window.addEventListener('scroll', function (event) {
      if (self.focus && document.body.scrollTop !== 0) {
        // Safari only in portrait mode reports strangely smaller size in 10px.
        var newWindowHeight = window.innerHeight;
        // If iOS in portrait mode, real height when focused is little bit bigger:
        newWindowHeight += 10;

        var offsetTop = document.body.scrollTop;
        var style = document.getElementById('window').style;
        style.height = newWindowHeight + 'px';
        style.top = offsetTop + 'px';
        self.focusPatchApplied = true;
      }
    });
    
    // IMPORTANT: this should be attached before DOMContentLoaded!
    document.addEventListener('blur', onDocumentBlur, true);
    
    document.addEventListener('DOMContentLoaded', function () {
      
      var inputs = document.getElementsByTagName('input');
      for (var idx = 0; idx < inputs.length; ++idx) {
        var input = inputs[idx];
        input.addEventListener('touchend', onInputClick);
        input.addEventListener('mousedown', onInputClick);
        input.addEventListener('focus', onInputFocus, true);
      }
    });
  </script>
    <link rel="icon" href="/favicon.ico">
</head>
<body style="margin: 0; padding: 0; height: 100%">
  <div id="window">
    <div id="scroller" style="width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scrolling: touch!important;">
      <div style="background: rgba(255,255,0,0.3); position: relative; width: 100%;">
        <input type="text" value="Tap me 1">
        <input type="text" value="Tap me 2">
        <input type="text" value="Tap me 3">
        <input type="text" value="Tap me 4">
        <input type="text" value="Tap me 5">
        <input type="text" value="Tap me 6">
        <input type="text" value="Tap me 7">
        <input type="text" value="Tap me 8">
        <input type="text" value="Tap me 9">
      </div>
    </div>
    <div style="position: absolute; top: 0px; width: 100%; color: white; background-color: blue">Top</div>
    <div style="position: absolute; bottom: 0px; width: 100%; color: white; background-color: blue">Bottom</div>
  </div>
</body>