7

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?

dloeda
  • 1,516
  • 15
  • 23
Expert wanna be
  • 10,218
  • 26
  • 105
  • 158
  • your question is not clear and what your code is doing actually? – Alive to die - Anant Mar 27 '18 at 09:43
  • 4
    Just FYI your function makes it imposible to select text by mouse, or to put the cursor in the middle or at the beginning by clicking the mouse. I would hate a UI that does this to me. – Peter B Mar 27 '18 at 09:45
  • 1
    Why would you ever want to force the caret to move to the end of the string in an input element? That's horrible UI and UX. There are reasons why the `Home` and `End` keys are created. – Terry Mar 27 '18 at 09:54
  • @PeterB I think that this is why he wants to change the click event to the focus event, it would make more sense – Hammerbot Mar 27 '18 at 10:08
  • @Terry I'm working on mobile site, not PC. when user focus(tap) on the quantity input, I want to move the cursor to the end of inputs so that user can edit the current number easier by delete key. – Expert wanna be Mar 27 '18 at 11:06

4 Answers4

9

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)

Calvin Nunes
  • 6,376
  • 4
  • 20
  • 48
1

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.

Georgi Vatsov
  • 428
  • 6
  • 10
0

The main difference is focus event call any time when you will focus on input field like if you use tab button and focused on input field but in case of click you need to click on input field.

Pankaj Bisht
  • 986
  • 1
  • 8
  • 27
0

I think that it has to do with the fact that the code executed at the click is executed before focusing on the input and affecting a position to the cursor.

On the other hand, when you listen to the focus event, the cursor has already a position and stays at this position.

That's pure personal theory. However, if you want to make it work, I found a great solution that works in Chrome on this question: Use JavaScript to place cursor at end of text in text input element

You need to clear the value of the input, wait for one millisecond, and reapply the value: 

$(function() {
    $('#test-input').on('focus', function(evt) {
      $target = $(evt.target);
      var val = $target.val();
      $target.val('');
      setTimeout(() => {
        $target.val(val)
      },1)
  });
})
Hammerbot
  • 15,696
  • 9
  • 61
  • 103