title: onClick vs onFocus on input element
body: <p>To move focus on the end of inputs when user click the input box,
  I use something like this,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
      $('#test-input').on('click', function(evt) {
      $target = $(evt.target);
      var val = $target.val();
  
      $target.val('').val(val);
    });
  }())</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;input type="text" name="test" id="test-input" value="abcdefgh" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But if I change the 'click' to 'focus', it doesn't work. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
      $('#test-input').on('focus', function(evt) {
      $target = $(evt.target);
      var val = $target.val();
  
      $target.val('').val(val);
    });
  }())</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;input type="text" name="test" id="test-input" value="abcdefgh" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How different onClick and onFocus actions in that case?</p>