title: iOS Safari trigger Scan Credit Card by clicking button
body: <p>Hi I am currently creating a test app. Scan Credit Card feature works for me when the user clicks on the text field Name or cardNumber. My question is:</p>
  
  <ol>
  <li><p>I want the same to happen when the user clicks "button1" - this should open the camera to scan card and populate the existing text fields i.e. name, cardnumber and expiry date. on a bonus it should also show which fields it was not able to populate. </p></li>
  <li><p>On the camera screen when it is scanning the card can I put additional text like "your details will not be stored" ?</p></li>
  </ol>
  
  <p>thanks for your help. my html code is below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Scan Credit card&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="button" id="button1" value="Scan Your card" /&gt;
      &lt;form&gt;
          &lt;!-- NAME --&gt;
          &lt;label for="Name"&gt;Name&lt;/label&gt;
          &lt;input type="text" placeholder="Name on card"&gt;
  
          &lt;!-- CC# --&gt;
          &lt;label for="cardNumber"&gt;Card&lt;/label&gt;
          &lt;input name="cardNumber" type="text" placeholder="4514..." pattern="[0-9]*"&gt;
          &lt;br&gt;
  
          &lt;label&gt;Expiration Date&lt;/label&gt;
  
          &lt;!-- YEAR --&gt;
          &lt;select name="year"&gt;
              &lt;option value="2015"&gt;2015&lt;/option&gt;
              &lt;option value="2016"&gt;2016&lt;/option&gt;
              &lt;option value="2017"&gt;2017&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;!-- MONTH --&gt;
          &lt;select name="month"&gt;
              &lt;option value="1"&gt;01&lt;/option&gt;
              &lt;option value="2"&gt;02&lt;/option&gt;
              &lt;option value="3"&gt;03&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;br&gt;
  
          &lt;input type="reset"&gt;
      &lt;/form&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var events = "focus input change blur"
          var states = events.split(" ")
          var MAX_DELAY = 100;
  
          var state = 0;
          var start;
  
          $("input[name=cardNumber]").on(events, function(event) {
              if (event.type == states[0]) {
                  state = 1;
                  start = event.timeStamp;
              } else if (event.type == states[state]) {
                  state++;
                  if (state == states.length &amp;&amp; (event.timeStamp - start &lt; MAX_DELAY)) {
                      state = 0;
                      $(document).trigger("autofill");
                  }
              } else {
                  state = 0;
              }
          });
  
          $(document).on("autofill", function() {
              alert("Autofill Detected");
          });
  
          $("#button1").click(function () {
  
          });       
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>