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.
Related
I have a row of <a> elements which have onclick handlers:
<a onclick="selectCoin('MER');">
<div id="MER">
...
</div>
</a>
The interior of the <div> child gets overwritten continuously to update some text inside the buttons. The updating is done by querying the #MER selector, and assigning to innerHTML. I noticed that the onclick handlers don’t always run if the <div> element is being updated in the background. Oftentimes, I have to click it two or three times before the onclick hander actually gets invoked. If I make the <div> elements static, the onclick handlers run consistently and reliably.
Why does updating the <div> child cause the onclick handler to stop working consistently? How do I fix this issue, while still updating the contents of the button?
To generate a click event, an element must receive a mousedown followed by a mouseup.
If the element goes away after the mousedown and is replaced with a new one, the click event is not sent.
You could do your own mousedown/mouseup detection on the <a> element, but if nothing inside the element is really clickable, you can disable mouse events on the child elements, so that they all occur on the <a> element
on your "MER" div:
style="pointer-events:none;"
Working fiddle:
https://jsfiddle.net/8h17rcpz/
click events are only generated if a mousedown and mouseup pair of events are fired consecutively on the same element, which is not going to happen if it gets swapped between down and up events.
The simplest solution would be to replace onclick in HTML source with onmouseup. What side effects or undesirable behavior that might produce is not possible to assess from the information provided.
I am having a div which contains an input element and span element as children. The input and span are siblings(having common parent div). So i am having a blur event on div and i am having tabindex 0 on span element. So when my focus is on input element and when i tab the focus shifts to span but the blur event is fired.
Is this event firing expected when tabbing between sliblings?
React Code:
<div className="box-v2"
tabIndex={-1}
onBlur={this._onBlur}>
<input ref="inputBox"
className="input-box"
spellCheck={false}
value={this.state.text}
onChange={this._onChange} />
<span className="icon"
tabIndex={0}/>
</div>
In the world of React JS, we can assume that it indeed is expected. If it makes sense, is another story.
Reason:
Native focus and native blur events don't bubble. Corresponding React event handlers onFocus and onBlur do bubble - dun dun dun.
(Source: https://github.com/facebook/react/issues/6410#issuecomment-207064994)
I created a WebpackBin where you can test and compare the behaviour:
https://www.webpackbin.com/bins/-KoJBHpK9s_OA76FnLkv
Open your browser's dev console, webpackbin cannot show the console.log of the iframe, I wanted to show both examples "side by side".
As you can see, the React behaviour is the one you described. You focus the input field and if you tab to the sibling span, it will fire the onBlur event.
But in the native code, this is not what happens. If you focus the input there and then tab, nothing happens (except moving the focus to the sibling span, of course.
If you focus the div and then leave the focus again, then it will fire the onBlur event too.
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?
I am creating above text box in my JSP file which getting populated in javascript(basically content inside textbox is dynamic not static). I want to display the content of text box when I take mouse over text box. Is there any function in javascript I can use for it?
Use the onmouseover event handler. Modify the input's text using the value property. You can also use an onmouseout event handler to clear the text when the mouse leaves the input if you need it. See it in this fiddle.
For instance:
<input id="anId" type="text"
onmouseover="this.value=calculateText(this.id)"
onmouseout="this.value=''">
Just in case you'd like to do the same thing when the <input> gets/loses the focus (by TAB for instance), use the onfocus and onblur event handlers.
UPDATE It turns out the OP wanted to dynamically change the title attribute of the input, so that it pops up in a tooltip when the mouse hovers over it. This can be achieved adding an onkeyuponinput event handler to the component that sets this.title to this.value. Learn more about oninput here.
<input type="text" oninput="this.title = this.value">
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