I want to make some changes to a text field once it loses the focus but I cant figure out the event I need. This is my code:
Event.observe('my_text_field', '????', function(event) {
do something here
}
So, what do I have to put in instead of the ???? ?
Thanks!
You are looking for the blur event:
The blur event is fired when an element has lost focus.
And from the DOM2 Events spec:
The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
Related
using latest Chrome browser.
even after wiring up the onchange event for an inputsurface the dirty way since there is no extended event to just do inputsurface.on('change',function(){}):
MyInputSurface.prototype.deploy = function deploy(target) {
this._superDeploy(target);
target.onchange = function() {
console.log('test change');
};
target.onclick = function() {
console.log('test click');
};
};
The onchange event does not get fired until i click back in the browser window. The click event works just fine. Any advice?
The onchange event does not fire until the input loses focus. This is why you have to click in the browser window again before your callback is run.
From the IE Dev Center:
This event is fired when the contents are committed and not while the value is changing. For example, on a text box, this event is not fired while the user is typing, but rather when the user commits the change by leaving the text box that has focus. In addition, this event is executed before the code specified by onblur when the control is also losing the focus.
If you want the value of the input as the user is typing, you'll have to listen for the input's input event.
Again from IE Dev Center:
You can use the oninput to detect when the contents of a textArea, input type=text, or input type=password have changed. This event occurs immediately after modification, unlike the onchange event, which occurs when the element loses focus.
When your input callback fires, simply take the target value as you would with change.
I have a kendo ui grid which has an incell editing mode.
Required is when altering a value in a cell and pressing anywhere else a confirmation window to appear to save/cancel the change.
Right now i have managed to make it partially work. In other words when i change a value and press somewhere on the web page or a button i get the confirmation window as requested.
When i press on another cell nothing happens. The pressed cell gets in edit mode, the "edit" function is fired but the previous cell loses its value and the binded function is never called.
So in a few words, i need to call my confirmation function every time a value is changed and the user presses anywhere else. Right now it partially works. It seems that the function is not fired when pressing on another cell.
My source right now is like that.
edit: function(e) {
e.model.unbind("change", confirmationFun).bind("change", confirmationFun);
}
function confirmationFun(e){
// open confirmation dialog and call save function
}
I tried to combine my confirmation with the change: function(e) but the change is fired every time i press on a cell, even before i change a value.
Instead of using edit event, you might use blur. After the initialization of your grid add the following command that binds any blur to your confirmationFun function.
$('#grid').on("blur", "input", confirmationFun);
Where grid is the id of your KendoUI grid.
The problem was finally resolved by removing the selectable: "multiple cell"
part from my code. Now by pressing on a different cell i get the confirmation dialog as required.
Thank you.
How to detect a mouse click (or mousedown) event on a simple dropdown combo (combobox with style=1)?
I am unable to see mouseclick or mousedown event handlers for combobox in my vb6 IDE.
My aim is to detect right click.
Thanks in advance.
If the events aren't exposed, you may need to subclass the control and handle the WM_RBUTTONDOWN message.
Im using Ext JS 4. I have a button inside a container. I want the container to receive mouseover, mouseout, and click events, but the button is causing the mouseover and mouseout event handlers to be called twice on the container. How can i disable the events on the child button?
I believe you are running to 4.0's new bubbleEvents behavior. Components now propagate some events to their parent containers. This happens in code, independent of DOM event bubbling, up the component hierarchy.
http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.container.Container.html
The best fix is to simply stop the event once you've handled it. That should prevent all bubbling, component or DOM. It is generally a good idea to do this for click events to make sure one and only one thing happens in response to a click, but I'm less certain it's appropriate for mouseover and mouseout.
panel.on('click', function(e) {
e.stopEvent();
// do your stuff
});
another fix you could try (I haven't) is to wipe bubbleEvents on the button.
Another, possibly less robust fix is to turn on event buffering:
el.on('click', this.onClick, this, {buffer: 10});
Buffering collapses duplicate events in a configurable time window into one and it's useful for smoothing out rapid fire or duplicate UI events, but I'm not sure how it plays with bubbling.
{
...
preventDefault: true,
...
}
Ive never seen this.
I click into my textbox to type in a value and as soon as i release the mouse button focus jumps to the above dropdown list. No javascript on these items.
If i hold the mouse button down i can type in a value to the textbox.
Any idea?
I had my textbox inside the label tag by mistake - this was the reason the focus jumped for me
Someone might be catching the mouseup event.
Event handling differs across browsers which might explain why it happens in all browsers except IE7.