Develop Reference

How does onchange and onkeyup work in javascript?

I was trying to validate a password field when I found the javascript code on the net. Can someone please explain when is the "onchange" fired and why does the code not work when I replace onkeyup with onchange (last 2 lines in javascript code)
function validatePassword(){
if(password.value != confirm_password.value) {
confirm_password.setCustomValidity("Passwords Don't Match");
} else {
confirm_password.setCustomValidity('');
}
}
password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;
<div class="password" id="password-fields" style="display:none">
Password: <input type="password" name="password" class="password" id="password"><br>
Confirm Password: <input type="password" name="password" class="password" id="confirm-password">
</div>
<div> <input type="submit" name="submit"> </div>
</form>

The change event occurs when you leave an input field after having changed its value. It doesn't fire immediately as the user changes the value, only when they've finished, which is detected by them using the keyboard or mouse to select a different element on the page.
The keyup event occurs after every keystroke. This allows you to take action while the user is typing.

The onChange event occurs when the value is assigned to the field, which is usually when the field loses focus.
The onKey events are bound to the keypress, meaning, they are triggered by the key itself and not related to the value assignment of the field.
The onKeyUp event will only fire when the user physically stops pressing the key (when the key goes "up").
You can test the behavior here.

How can I do something on input checkout?

Here is my code:
$(document).on('checkout', 'input', function(){
alert('input is not focused anymore');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
But that alert won't be shown when I checkout of that input. I mean nothing happens when I click everywhere except focus on the input. Sorry I don't know English as well and I cannot explain what exactly I want. I want to apply something like stackoverflow's search box.
As you can see it in the top of current page, when you click on the search input (which is into stackoverflow's header), the width of the input will be increased (and some other css properties will be set), and when you click on somewhere else (checkout event ), the width will be toggled. I want to do something like this anyway.
Why checkout event has no reaction in my code?

There is nothing like checkout event, its blur i.e. focus lost for an input element. It is triggers when the input lost focus.
$('input:text').bind('focus blur', function() {
$(this).toggleClass('red');
});
input{
background:#FFFFEE;
}
.red{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="calc_input" type="text" name="start_date" id="start_date" />
<input class="calc_input" type="text" name="end_date" id="end_date" />
<input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" />
</form>
Check the above example, in this the color of input is changed on focus and re-changed on blur. In the same way you can increase the width of input and vice versa.

How to auto-detect keyboard input AND auto-focus to input AND enter it into input using js or jquery?

OK, I know how to detect keyboard input. I know how to focus on keyboard input.
But I want to know what the best practice is for detecting keyboard input => focusing to textarea or textfield => AND enter that key into the field.
Here's how it would work: I'm on a page. I type A. Then my textfield gets focused and A is typed into the field. This sounds trivial but actually I haven't found a simple way to do this. The reason is because the initial keyboard input event is not directed towards the textfield, and I need to propagate that event to the newly focused text field.
Is there a conventional approach to doing something like this?

Sample html:
<form>
<input type="text" />
<input type="text" id="thisguy" />
<input type="text" />
<input type="text" />
</form>​​​
jQuery for above html
$(document).live('keypress', function (e) {
$('#thisguy').val($('#thisguy').val() + String.fromCharCode(e.which));
});​
Needs to be cleaned up. Maybe set focus instead of changing the text value.

Auto-highlight an input field on focus

I was wondering if there was a way for text inside a input box (pre loaded using value="") to highlight when the user clicks on it?
input type='text' name='url' id='url' value='http://www.a-link.com/' />
EDIT
I need the text to he highlighted so the user can copy it.

<input type="text" name="textbox" value="Test" onclick="this.select()" />

You could attach javascript to the click event to select the text like so:
$(document).ready( function() {
$('#id').click( function( event_details ) {
$(this).select();
});
});
There is a potential issue where the user could be trying to click at a later point in the text to correct a typing mistake and end up selecting the whole thing. A better way would be to trigger this when the input gets focus from the user. you'd replace .click with .focus in the example above.
jQuery event documentation:
http://api.jquery.com/category/events/

Add the following onclick attribute to make the entire <input> automatically highlight when the user clicks on it:
<input type="text" value="Test1" onclick="this.select()" />
Alternatively, if you want the user to be able to change the selection after the initial click, change the onclick attribute to an onfocus attribute. This will also highlight the entire <input> when the user clicks on it, but it allows them to change the highlighted part manually afterwards:
<input type="text" value="Test2" onfocus="this.select()" />
Here is an example of both inputs in action.

You want to use focus property. Like this: http://jsfiddle.net/sCuNs/
html
<p><input type="text" size="40"></p>
css
input:focus, textarea:focus{
background-color: green;
}

Do you mean to select the text?
Use onclick event to fire the code:
document.getElementById("target-input-id").select();

$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});

This should do it:
<input type='text' name='url' id='url' onclick="this.select()" value='http://www.a-link.com/' />

<input id="inputField" type="text" size="40" value="text to be highlighted"></p>
document.getElementById('inputField').focus();
The default behavior for focus selects the text in the input field. I was looking for a solution not to do that when I found this.

jQuery selector - input field

I'd like to enable the textbox when it is clicked. However, when I click the textbox, nothing happens. I believe it is a problem with the jQuery selector. Why isn't this working?
<script>
$(document).ready(function() {
$(':input').click(function() {
$(this).removeAttr('disabled');
});
});
</script>
<input type="text" value="123" disabled="disabled" />
Note: I tried both $('input') and $(':input') to select the textfield. Neither worked.

A disabled input isn't going to fire events. Try changing from disabled to readonly.

It has nothing to do with the selector you're using, but rather because, since the input element is disabled, the events for the input will not fire - see: http://www.jsfiddle.net/DvZDh/
<input type="text" value="123" disabled="disabled" />
<input type="text" value="123" />
The code works on the second input element, but not the first. A simple solution would probably be to use CSS to simulate the disabled state instead.