title: How to programmatically focus on a textfield on page load for mobile safari?
body: <p><strong>Note:</strong> Due to a work-related change, I can no longer verify the answers posted here. Most likely, I will never be able to accept an answer down below. The information posted here is useful IMO, so I will just leave it as it is. If you think you know an answer, feel free to answer and we'll just let the community decide which ones are useful.</p>
  
  <hr>
  
  <p><strong>Background</strong></p>
  
  <p>I am developing a <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html" rel="nofollow noreferrer">standalone web app</a> for iPod Touch. One of my requirements is to focus on a textfield when a page loads so that a user can do a task continually (e.g. with a barcode reader). </p>
  
  <p><strong>Problem</strong></p>
  
  <p>The problem is that it <em>does focus</em> on the text field in question, but the <em>keyboard does not go up</em>. <strong>Is there a workaround for this? Or is this by design by Apple?</strong></p>
  
  <p><strong>Sample Html</strong></p>
  
  <p>I'm unsure on how to put this into a code snippet, but this is where I've been experimenting on:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0.0"&gt;
  
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
      &lt;link rel="apple-touch-icon" href="https://cdn57.androidauthority.net/wp-content/uploads/2016/06/android-win-2-300x162.png"&gt;
  
      &lt;title&gt;TESTING&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
      &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          // javascript goes here
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;section id="content"&gt;
  
          &lt;div class="container" style="margin-top: 50px;" &gt;
  
              &lt;p&gt;Testing textfield focus&lt;/p&gt;
  
              &lt;form method="POST"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-xs-12"&gt;
                          &lt;input type="text" class="form-control first-responder" /&gt;
                      &lt;/div&gt;
                      &lt;div class="col-xs-12"&gt;
                          &lt;button type="submit" class="btn" style="width: 100%" &gt;OK&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  
          &lt;/div&gt;
  
      &lt;/section&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I view this on Safari, then add it to the homescreen so that it would act as a standalone web app.</p>
  
  <p><strong>Attempts</strong></p>
  
  <p>I tried searching around for solutions, the first one(I lost the link) suggested to try timeouts like so:</p>
  
  <pre><code>$(function () {
      var firstResponder = $(".first-responder");
      setTimeout(function() {
          firstResponder.focus();
  
      }, 1000);
  
  })
  </code></pre>
  
  <p>Another of the <a href="https://stackoverflow.com/a/6302507/2431281">solutions</a> I found suggested to set the selection range like so:</p>
  
  <pre><code>$(function () {
      var firstResponder = $(".first-responder");
      setTimeout(function() {
          firstResponder[0].setSelectionRange(0, 9999);
  
      }, 1000);
  
  })
  </code></pre>
  
  <p><a href="https://teratail.com/questions/8117" rel="nofollow noreferrer">There</a> was also a suggestion to bind it to a click like so:</p>
  
  <pre><code>$(function () {
      var firstResponder = $(".first-responder");
      firstResponder.on('click', function() {
          firstResponder.focus();
      });
  
      firstResponder.focus().click();
  })
  </code></pre>
  
  <p>I also tried triggering a touchstart like so:</p>
  
  <pre><code>$(function () {
      var firstResponder = $(".first-responder");
      firstResponder.on('touchstart', function() {
          firstResponder.focus();
      });
  
      firstResponder.trigger('touchstart');
  })
  </code></pre>
  
  <p>I also tried with a simple ajax call like so (don't mind the success/error. All I wanted to do was focus after ajax call): </p>
  
  <pre><code>function doAjax() {
      var firstResponder = $(".first-responder");
  
      $.ajax({
          url: "#",
          method: "POST",
          dataType: "json",
          success: function(result) {
              firstResponder.focus();
          },
          error: function(request, error) {
              firstResponder.focus();         
          }
      });
  }
  </code></pre>
  
  <p>I got kind of desperate so I tried <a href="https://stackoverflow.com/a/30977546/2431281">setting some css</a> too:</p>
  
  <pre class="lang-css prettyprint-override"><code>user-select: text;
  -webkit-user-select: text;
  </code></pre>
  
  <p>These solutions <strong>worked on iOS 9.1</strong> (except the css one) but all of them <strong>failed on iOS 11.1.1</strong>. I tried combining various solutions, setting timeouts, etc. but none seem to work. As I noted, it does <em>focus</em> because I can see that the textfield's borders turn blue, signifying that it has focus. But <strong>I need to have the keyboard displayed</strong> too.</p>
  
  <p>This behavior seems to be either a <a href="https://stackoverflow.com/a/3599260/2431281">bug</a> or a <a href="https://stackoverflow.com/a/7435303/2431281">usability</a>/<a href="https://stackoverflow.com/a/44106195/2431281">security</a> <a href="https://stackoverflow.com/a/7332160/2431281">feature</a>. If this is by design (i.e. a security feature), <strong>is there an official documentation by Apple that talks about this?</strong></p>
  
  <p><strong>Addendum</strong></p>
  
  <p>If you think that the barcode reader might be the problem, this is not true. In the project I'm working on, the barcode reader replaces the native keyboard. In theory, even without the barcode, as long as I am able to bring up the keyboard on page load, I should be able to fulfill my requirement.</p>
  
  <p>Continuous task is possible because the barcode reader can include an <kbd>Enter</kbd> key after the barcode it reads, thereby submitting the form the textfield is on. After the page reloads, if the textfield gets automatically focused, all the user needs to do is read another barcode. The page submits again, reloads, autofocuses, and the cycle can be repeated.</p>