We Keep Coding

How do I detect when a div has lost focus?

Given the following markup, I want to detect when an editor has lost focus:
<div class="editor">
<input type="text"/>
<input type="text"/>
</div>
<div class="editor">
<input type="text"/>
<input type="text"/>
</div>
<button>GO</button>
EDIT: As the user tabs through the input elements and as each editor div loses focus (meaning they tabbed outside the div) add the loading class to the div that lost focus.
This bit of jquery is what I expected to work, but it does nothing:
$(".editor")
.blur(function(){
$(this).addClass("loading");
});
This seems to work, until you add the console log and realize it is triggering on every focusout of the inputs.
$('div.editor input').focus( function() {
$(this).parent()
.addClass("focused")
.focusout(function() {
console.log('focusout');
$(this).removeClass("focused")
.addClass("loading");
});
});
Here is a jsfiddle of my test case that I have been working on. I know I am missing something fundamental here. Can some one enlighten me?
EDIT: After some of the comments below, I have this almost working the way I want it. The problem now is detecting when focus changes to somewhere outside an editor div. Here is my current implementation:
function loadData() {
console.log('loading data for editor ' + $(this).attr('id'));
var $editor = $(this).removeClass('loaded')
.addClass('loading');
$.post('/echo/json/', {
delay: 2
})
.done(function () {
$editor.removeClass('loading')
.addClass('loaded');
});
}
$('div.editor input').on('focusin', function () {
console.log('focus changed');
$editor = $(this).closest('.editor');
console.log('current editor is ' + $editor.attr('id'));
if (!$editor.hasClass('focused')) {
console.log('switched editors');
$('.editor.focused')
.removeClass('focused')
.each(loadData);
$editor.addClass('focused');
}
})
A bit more complicated, and using classes for state. I have also added in the next bit of complexity which is to make an async call out when an editor loses focus. Here a my jsfiddle of my current work.

If you wish to treat entry and exit of the pairs of inputs as if they were combined into a single control, you need to see if the element gaining focus is in the same editor. You can do this be delaying the check by one cycle using a setTimeout of 0 (which waits until all current tasks have completed).
$('div.editor input').focusout(function () {
var $editor = $(this).closest('.editor');
// wait for the new element to be focused
setTimeout(function () {
// See if the new focused element is in the editor
if ($.contains($editor[0], document.activeElement)) {
$editor.addClass("focused").removeClass("loading");
}
else
{
$editor.removeClass("focused").addClass("loading");
}
}, 1);
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/8s8ayv52/18/
To complete the puzzle (get your initial green state) you will also need to also catch the focusin event and see if it is coming from the same editor or not (save the previous focused element in a global etc).
Side note: I recently had to write a jQuery plugin that did all this for groups of elements. It generates custom groupfocus and groupblur events to make the rest of the code easier to work with.
Update 1: http://jsfiddle.net/TrueBlueAussie/0y2dvxpf/4/
Based on your new example, you can catch the focusin repeatedly without damage, so tracking the previous focus is not necessary after all. Using my previous setTimeout example resolves the problem you have with clicking outside the divs.
$('div.editor input').focusin(function(){
var $editor = $(this).closest('.editor');
$editor.addClass("focused").removeClass("loading");
}).focusout(function () {
var $editor = $(this).closest('.editor');
// wait for the new element to be focused
setTimeout(function () {
// See if the new focused element is in the editor
if (!$.contains($editor[0], document.activeElement)) {
$editor.removeClass("focused").each(loadData);
}
}, 0);
});

Here's what worked for me:
$(".editor").on("focusout", function() {
var $this = $(this);
setTimeout(function() {
$this.toggleClass("loading", !($this.find(":focus").length));
}, 0);
});
Example:
http://jsfiddle.net/Meligy/Lxm6720k/

I think you can do this. this is an exemple I did. Check it out:
http://jsfiddle.net/igoralves1/j9soL21x/
$( "#divTest" ).focusout(function() {
alert("focusout");
});

Detect change in an input field when selecting value from a box

I want to detect a change in the input field when i select a value from the box like in the picture below.
html:
<input type="text" class="AgeChangeInput" id="range"/>
js:(not working)
<script>
$(document).ready(function()
{
alert("Hello");
$("#range").bind('input', function()
{
alert("done");
});
});
</script>
I also tried live on functions but they didn;t work too.

Your date selection box should fire a change event, then you only need to capture it:
$(function () {
$('#range').change(function () {
...
});
});
If the selection box doesn't fire the event, you'll need to trick the dom. Something like:
$(document).ready(function () {
// Asuming your selection box opens on input click
$('#range').click(function () {
$('.special-box-class').click(fireRangeEvent);
});
// Now the firing function
function fireRangeEvent() {
...
}
});
Hope it works

Try to use this code
changeDate - This event is fired when the date is changed.
$('#range').datepicker().on('changeDate', function(ev) {
//example of condition
if (ev.date.valueOf() > checkout.date.valueOf()) {
//make action here
alert('Here');
}
});

word counter Javascript function call

Wanted to have a word counter next to a input textbox on the website
Got it working to show the count when the user click or modify the text but I wanted to load up straight away when the page finish loading.
$(document).ready(function() {
$("#product_name").change(displayText).keyup(displayText);
function displayText(){
$("em#counter").text($(this).val().length +' chars');
}
});
So I tried this the code below but couldn't get it working and don't know why.
$(document).ready(function() {
if($("#product_name").length){
displayText();
}
$("#product_name").change(displayText).keyup(displayText);
function displayText(){
$("em#counter").text($(this).val().length +' chars');
}
});
Thanks so much.

Try this
if($("#product_name").length){
displayText();
}
$("#product_name").change(displayText).keyup(displayText);
function displayText(){
$("em#counter").text($("#product_name").val().length +' chars');
}
Demo: Fiddle
Problem was your displayText() call during page load. In displayText you had used $(this) to access the input field, which was working as a event handler. But when you call displayText directly this will point to the window object.

Try .on() with multiple event.
$("#product_name").on({
change: function() {
// Handle change event
},
keyup: function() {
// Handle keyup
}
});
and for "when the page finish loading." use $(window).load(function() { });

How to Select / Highlight text box content on first click only

Please does anyone know the script that can help me highligh the content of a textfield on the first click
on the second click the selection / highligh should be cleared from the text box leavingg the insertion point.
Thank You in ADvance..

The script selects the text on the first click, but after every consecutive click the textarea will behave like a textarea always does. When the text area loses its focus due to the blur event and you click on it again, the text will be selected again.
Live Demo on JsFiddle
(function () {
var area = document.querySelector('#txt'),
clicked = false;
area.addEventListener('click', function () {
if (!clicked) {
area.select();
clicked = true;
}
});
area.addEventListener('blur', function () {
clicked = false;
});
})()
Because of addEventListener and querySelector the example is not fully cross browser compatible.

Try this: http://jsfiddle.net/4Hkhx/1/
$(document).ready(function(){
$('input').click(function(){
$(this).select();
});
});

function SelectText(sender) {
document.getElementById(sender.id).focus();
document.getElementById(sender.id).select();
}
<input type="text" id="tbTest" value="Test" onclick="SelectText(this)" />

focus() doesn't work inside colorbox pop-up

I tried to use focus for first input field on the form. but
it doesn't work. When I call attr("id") for that input it worked. When I call focus for the same input, I didn't see any
result. I also tried to use native Javascript. Does anyone know how to
fix that?

You are all misunderstanding the question. When Colorbox opens you can't focus an input field?
...unless you add your focus to the Colobox onComplete key e.g.
$('#mydiv a').colorbox({ onComplete:function(){ $('form input:first').focus(); }});
You could also bind the focus to an event hook:
$('#mydiv a').bind('cbox_complete', function(){
$('form input:first').focus();
});
That should be enough to get started.

use
$(document).ready(function() {
// focus on the first text input field in the first field on the page
$("input[type='text']:first", document.forms[0]).focus();
});

It may be happening that when your colorbox is opened its focus goes onto the highest element i.e. body of page. use document.activeElement to find that focus went to which element. Then find iframe or id of your colorbox and then set focus on it

Try the first selector,
$("form input:first").focus();
http://jsfiddle.net/erick/mMuFc/

I've just stumbled on this problem.
I think it's best to have a single $.colorbox opener like this:
function showActionForColorBox(
_url,
_forFocus
) {
$.colorbox(
{
scrolling: false,
href: _url,
onComplete: function () {
idColorboxAjaxIndect1.appendTo($('#cboxOverlay'));
idColorboxAjaxIndect2.appendTo($('#cboxOverlay'));
idColorboxAjaxIndect3.appendTo($('#cboxOverlay'));
idColorboxAjaxIndect4.appendTo($('#cboxOverlay'));
// --> Possible element's ID for focus
if (_forFocus) {
$('#' + _forFocus).focus();
}
return;
},
onCleanup: function () {
// TODO: ?
return;
},
onClosed: function () {
if (shouldReloadPageAfterColorBoxAction) {
// --> Should we reload whole page?
shouldReloadPageAfterColorBoxAction = false; // NOTE: To be sure: Reset.
window.location.reload(false);
}
else if (cbEBillsActionReloadPopup) {
// --> Should we reload colorbox
cbEBillsActionReloadPopup = false;
showActionForColorBox(_url);
}
else if (cbShouldLoadAnotherContentAfterClosed) {
// --> Should we reload colorbox with custom content?
cbShouldLoadAnotherContentAfterClosed = false;
$.colorbox({ html: setupContentForcbShouldLoadAnotherContentAfterClosed });
setupContentForcbShouldLoadAnotherContentAfterClosed = '';
}
return;
}
}
);
return;
}

You can also use
$.colorbox({
...,
trapFocus: false
});
to disable focus inside colorbox