why onblur="this.focus()" does not work? - javascript

i would expect that one can not leave such an input:
Because, wehen leaving, onblur() fires, and calls focus(), which should re-give the focus on the field.
But it does not work. Did i miss something ?

onblur triggers before the element loses focus. This means that calling focus from within the event is redundant because the element still has it.
also see
How to make javascript focus() method work in onBlur event for input text box?

Related

Javascript blur event on wrapper div

I have inner input field and a wrapper div element.
I have added contenteditable attribute to the div element in order to be able to set focus on it.
I would like to catch the onblur event of the div.
Now, If I'm in focus on the input field and click with the mouse on different place in the screen
the blur event of the input field is called of course but not the blur event on the div.
Of course this makes sense - this is how the browser works.
But anyway,
I was wondering if and how it is possible to achieve that.
<div id="wrapperDiv" contenteditable class="wrapperDivClass">
<input id="innerId">
</div>
For blur event to fire on an element, the element needs to receive focus first. But elements do not receive focus by default.
You can add tabindex="0" or contentEditable to your div so it will receive focus.
See it in action: http://jsfiddle.net/t25rm/
Answered here:
Div - onblur function
Issue solved when I changed the blur event to focusout
From MDN web docs:
The focusout event is fired when an element is about to lose focus. The main difference between this event and blur is that the latter doesn't bubble.
This is exactly what I needed.

What event to know when user has entered data into form?

I have a HTML form. I want to enable/disable a button until user eneters text in one of the fields. I am adding an event attribute to the which triggers some javascript. This javascript will enable/disable the button.
Problem is I can't figure out what event attribute to use. What event attribute please will trigger as soon as user enters data? I tried onchange but that only gets called when i clicked back outside the text area. So it may aswell be onblur.
You can use the input
function activateForm (event) {
if(!this.value == ""){
}
}
var input = document.querySelector(".myInput");
input.addEventListener("input", activateForm , false)
There are 2 possible events that can be used: either onChange or onKeyPress. onChange will trigger when the value of an input has changed while onKeyPress will trigger every time the user types something in a text box. The onChange triggers once the user has CHANGED something in the value, and got out of the input focus. That means the user has to hit TAB or click somewhere else for the event to trigger, hence why onKeyPress might be better suited.
Read more:
http://www.w3schools.com/jsref/event_onchange.asp
http://www.w3schools.com/jsref/event_onkeypress.asp
Younger browsers also support onInput which should certainly be prefered for now, if you do not need to support older browsers.

Fire onblur event before onchange event

I have a large form that contains several text input fields. Essentially, I need to handle the onchange event for all fields and the onblur events for some fields. When a change is made to a field and the field loses focus, both events fire (which is the correct behavior). The only issue is that I would like to handle the onblur
event before I handle the onchange event.
After some testing in ie and Firefox, it seems that the default behavior is to fire the onchange event before onblur. I have been using the following code as a test...
<html>
<body >
<input type="text" value="here is a text field" onchange="console.log('Change Event!')" onblur="console.log('Blur Event!')" >
</body>
</html>
Which brings me to my questions:
It seems that this behavior is consistent across browsers. Why does onchange fire first?
Since I cannot handle the onblur event for every input element, is there a way I can get onblur to fire before handling the onchange event?
The reason onchange fires first is that once the element loses focus (i.e. 'blurs') the change is usually complete (I say usually because a script can still change the element without user interaction).
For those elements that need onblur handled first, you can disable the onchange handler and fire the onchange (or even a custom event) from the onblur handler. This will ensure the correct order even though it is more work. To detect change, you can use a state variable for that field.
As a general remark though, the need for such synchronicity is a sign that the approach you are using to solve whatever problem you are solving might need more work even though sometimes it cannot be avoided. If you are sure this is the only way, try one of these methods!
EDIT: Just to elaborate on the last point, you would have to follow some assumptions about your event model. Are you assuming that each change event is followed by a blur and goes unprocessed otherwise, or would you like to process each change but those that are followed by a blurget further processing after whatever onblur does with them? In any case if you want to enforce the order the handlers would need access to a common resource (global variable, property, etc.). Are there other event types you might want to use? (input?). Finally, this link has some details for the change event for Mozilla browsers:
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change.
The third 'bullet' addresses the issue of event order.
This is a bit of hack, but it seems to do the trick on most browsers:
<input type="text" value="Text Input" onchange="setTimeout(function(){console.log('Change Event!')}, 0);" onblur="console.log('Blur Event!');" />
You can see a fiddle of it in action here: http://jsfiddle.net/XpPhE/
Here is a little background information on the setTimeout(function, 0) trick: http://javascript.info/tutorial/events-and-timing-depth
Hope that helps :)

onChange is called only when the element loses focus

I want that as you type in the textfield the div changes (I have the code for changing the div already). However the onchange event is only called once you are finished and click outside the textfield. I want it to be called as each letter is typed.
My code:
<input name="platetext" type="text" onchange="setValue(this)">
onChange is fired when the input looses focus I think. onKeyUp should do the trick for you.
There is an 'input' Event you can bind your event Handlers to (I think this was introduced with HTML5).
I made a quick and very dirty example here: http://jsfiddle.net/RdKZH/
This would be the clean approach to this problem (as keyup does not work on copy&paste), but you might want to test if it already works in all browsers you want to support.

javascript text input change event not firing

I have a text type input field and a checkbox.
If I change the text and then click outside the input box (or press enter or tab) the change event is thrown. But if I enter some text and then click directly on the checkbox using the mouse, only the checkbox change event seems to be thrown.
I have the following code:
<input type="text" name="text" class="update">
<input type="checkbox" name="check" class="update">
and this jQuery:
$('.update').change(function(){
console.log($(this));
});
Is this a known problem, and how can I make sure all change events are fired/thrown/caught in this setup?
To fire user changes, use the input event:
$('input').on('input',function(){...})
To fire code changes, use the DOMSubtreeModified event:
$('input').bind('DOMSubtreeModified',function(){...})
If you want to fire both user and code changes:
$('input').bind('input DOMSubtreeModified',function(){...})
The DOMSubtreeModified event is marked as deprecated and sometimes quite CPU time consuming, but it may be also very efficient when used carefully...
I'm not sure if I get it. But for me when I try to type in textfield and then click checkbox by mouse both events are fired. But you have to keep in mind that event 'change' for text input means that this input has to loose focus, as long as field is focused no change event ever will be triggered. This somehow might be your case. Checkboxes/radioboxes work different way tho. No need to loose focus.
Cheers.
P.S.
My test case:
http://dl.dropbox.com/u/196245/index16.html
The change event fires for both because you're listening to the update class.
The change event will not fire unless the input focus switched to other controls

Categories

Resources