Develop Reference

Html input range start and stop dragging event

I need to have a start and stop event on input range, so I can detect when dragging start and when it ends. Are these good events to use or is there a better way?
var input = document.getElementById('input')
input.addEventListener("mousedown", function() {
console.log('start')
}, false);
input.addEventListener("change", function() {
console.log('end')
}, false);
<input id="input" type="range" min="0" max="100" value="" />

I suggest using mousedown and/or mouseup too because the user can click anywhere in this range, and don't have to drag it necessary.

These events seem fine, but try just clicking on the input without dragging it. The console only logs "start" if you don't change the value.
If you want to capture that, you can just use the "mouseup" event.
input.addEventListener("mouseup", function-here);

onClick vs onFocus on input element

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?

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)

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.

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.

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)
});
})

Jquery: how to prevent running multiple times?

Sorry for my English, I'm not native English speaker.
I have problem with my code. I have on page something like this:
$('#hook label').on('click', function() {
console.log('ok');
icon = $(this).next('input').val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hook">
<label><input> <img src="http://placehold.it/35x35" ></label>
<label><input> <img src="http://placehold.it/35x35" ></label>
<label><input> <img src="http://placehold.it/35x35" ></label>
<label><input> <img src="http://placehold.it/35x35" ></label>
</div>
And this code is running twice if I click on image, but only one when I click on input or label element. How can I prevent to running this twice?
Here is example: http://jsfiddle.net/00akgoe7/2/

It's because of the default behavior of label. To stop that, you need to tell to the event object to stop is default behavior like this:
$('#hook label').on('click', function(ev) {
ev.preventDefault();
console.log('ok');
icon = $(this).next('input').val();
});
Clicking on a label associeted with the for attribute or inside the label, focus the input with a "fake" click event. This is why you get the event twice since by extension, if you click the input, you click the label (the parent) also.

It's two times because when you click on the label it send a click event also to the input and the new event bubbles back to the label. It's tricky :)
It's in all browsers for a better form usability.
So the another possible solution is:
$('label').click(function(e) {
if (e.target.tagName === "LABEL") {
alert("!! here")
}
});
Try it live: http://jsfiddle.net/8qffhwm3/2/

You just need to add a preventDefault().
$('#hook label').on('click', function(e) {
e.preventDefault();
console.log('ok');
});
I expect that it help you.

If you want prevent from the event being fired twice, you can use the 'mousedown' event handler. It will just be triggered once, as it is not triggered by standard by clicking the label.

Change event type

I'm trying to get the type of change of an element.
<input type="text" onchange="fn()"/>
<script>
function fn() {
if (event.isKeyPress)
// do something
else if (event.isClick)
//do something else
</script>
So in full, I'm changing a text field, then to change, the user has to unfocus the field and change its contents. I want to find the manner at which it was unfocused (e.g. by tab or click). Is this possible?
NOTE:
I am using jQuery.

If you put a keydown event on your input, you can trig the focusout event if the pressed key is "tab" and do what you want.
Else the focusout will be triggered by a clic.

You can use Keydown. See: http://www.javascripter.net/faq/onkeydown.htm or http://www.w3schools.com/jsref/event_onkeydown.asp

$('input').focus(function(){
// something..
}).change(function(){ // or keyup
// do something awesome
}).focusout(function(){
// that's it
});

$( "input" ).focusout(function() {
// do something
})
http://api.jquery.com/focusout/
https://api.jquery.com/focusin/
http://api.jquery.com/focus/

JQuery - focus triggers keyup event in target input

I will demonstrate my problem using the simple example. Consider the following script
$(document).on('keydown','#input1', function(e)
{
if(e.keyCode==13){ $("#input2").focus(); }
});
and HTML
<input type="text" id="input1"/>
<input type="text" id="input2" onkeyup='alert("UP")'/>
every time I press enter in the first input, focus goes to the second input but keyup event is triggered also. I tried stopPropagation but it does not work. How can I prevent that issue?

I'd say you could use keyup instead of keydown
$(document).on('keyup','#input1', function(e)
{
if(e.keyCode==13){ $("#input2").focus(); }
});
jsFiddle Demo