onClick vs onFocus on input element

Question

To move focus on the end of inputs when user click the input box, I use something like this,

$(function() {
    $('#test-input').on('click', function(evt) {
    $target = $(evt.target);
    var val = $target.val();

    $target.val('').val(val);
  });
}())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="test" id="test-input" value="abcdefgh" />

But if I change the 'click' to 'focus', it doesn't work.

$(function() {
    $('#test-input').on('focus', function(evt) {
    $target = $(evt.target);
    var val = $target.val();

    $target.val('').val(val);
  });
}())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="test" id="test-input" value="abcdefgh" />

How different onClick and onFocus actions in that case?

Answer 1

There's some differences:

onClick: This event is fired whenever the user clicks in an object, like a button, an image, an input... After the click, then comes the:

onFocus: This event is fired when an element is selected, it doesn't need to be clicked, it can be done programmatically, calling .focus() or using the Tab key, for example. Also, using onfocus instead of onclick, can help to avoid bubbling.

To finish, use the snippet below (I added more inputs, cycle through it with TAB (or click too), you'll see the caret going to end on all of then.
Why I added a timeout? Chrome Browser has an odd quirk where the focus event fires before the cursor is moved into the field, so, the event must wait to the cursor to get there before moving it to the end.;

$(function() {
  $('.test-input').on('focus', function(evt) {
    that = this;
    setTimeout(function() {
      that.selectionStart = that.selectionEnd = 10000;
    }, 1);
  });
}())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="test" class="test-input" value="abcdefgh" />
<input type="text" name="test" class="test-input" value="a1b2c3" />
<input type="text" name="test" class="test-input" value="abcdefghijklmnop" />

Extra: If you are programming just for mobiles, will be nice to take a look at touchEvents (https://developer.mozilla.org/pt-BR/docs/Web/Events/touchstart)

Answer 2

This should be working just fine the first time you click on the textbox. This is when the focus event is triggered, since you're actually 'focusing on' the item. From then on, until you click anywhere outside the element, your item will already have the focus and therefore will not execute the onfocus event.