Develop Reference

Blur event doesn't work as expected on input file

I have this script that is design to execute a function when you click outside of the targeted element hence the simple solution is to use the blur event. I used
blur on the input file and it is not working how I expect it to work. This is what I notice when I click on the input file, it instantly execute the function. How can I
prevent that? I want to be able to click on the input file element and then click any where that is outside of that input file element to be able to execute the
targeted function. If it's not possible with the blur method then what other methods can I use to do something like that?
document.querySelector('#x').addEventListener('blur',fx);
function fx(){
alert('ok')
}
<input id='x' type='file'>

The event is triggered immediately since the input element blurs if either the window dialog opens or you let go of your mouse while the cursor is on top of the button because the input element is the button.
You will have to write your own custom function that deals with that scenario. window.addEventListener('blur', blur) and window.addEventListener('focus', focus) may be useful to this end.
FWIW, here is a list of every single JS event.

OnChange event does not work properly

My OnChange event does not work properly - I want to trigger a function when user changes a textbox's value. But in my tests I have seen that the function triggers when textbox's value changes and textbox loses focus. Something wrong with my browser? Or is it about the ability of JavaScript? If the last one is true how can I can do that? Thanks in advance.

onchange event will trigger when an input field loses focus or when an option is selected from a dropdown menu, that's normal behavior.
If you want an event that will be triggered as the user types in an input field, you can use onkeypress, onkeydown or onkeyup events.

You could do with jquery:
$("textbox_id").keyup(function(){
//do something here
});

write the jquery code on keyup event and blur event also, because if user paste some copied data into textbox by using mouse only in that case only blur event called by jquery.

javascript/jquery trigger a text change event on a textarea

Is there anyway to trigger the textChanged event in a text area using javascript or jquery ?
I want the textchange event to occur once the page is loaded.

$(document).ready(function() {
$('textarea').trigger('change');
});
But this will only trigger if the change event was added through jQuery. If not you could try:
$('textarea').get(0).change();

Have you tried:
$(function(){
$("textarea").change()
})

In my case, I have to use the event input since my textarea used as emoji field.
For ex.
$('textarea').trigger('input');

a4j:support event onkeyup not working with right click copy and paste

I've tried looking for a list of all the possible events that can be used in the a4j:support event attribute. I cant find any reference that lists them, maybe somebody can provide a link?
I'm aware of the obvious ones like onclick, onchange, etc.
The reason I ask this is that I currently have an input text field. It has the onkeyup event attached to it via the a4j:support tag. It should enable a text box when the event fires.
The event does not fire when a user right clicks their mouse and pastes content into the field.
Is there an alternative event I could use to ensure this case is managed?
<h:inputText id="someName" value="#{myBean.example.exampleName}" maxlength="25" style="width:280px">
<a4j:support event="onchange" reRender="exampleTab"
action="#{myBean.activateTabPanel}" ajaxSingle="true"
ignoreDupResponses="true" />
</h:inputText>
<rich:tabPanel id="exampleTab" switchType="server"
style="width:100%;height:448px;" styleClass="top_tab"
inactiveTabClass="inactive_tab" activeTabClass="active_tab"
selectedTab="#{myBean.exampleTabState.selectedTab}">
<!-- Various stuff in here --->
</rich>
## ************ Update ***********##
I actually went with a jQuery solution in the end. Was much cleaner. Code attached for anyone interested.
jQuery(document).ready(function() {
// Call contructor
var common = new Site.Common();
});
// Constructor
Site.Common = function() {
// Only attach event listener if the element exists on page
if ( jQuery('input[id$="suggest"]') ) {
jQuery('input[id$="suggest"]').bind('paste', Site.Common.handleMousePaste.bind(this));
}
};
// Trigger the keyup event when user uses mouse to paste content info a field('element')
Site.Common.handleMousePaste = function(event) {
// Need to split the id (JSF adds the form name in front of the input field!)
var idParts = event.target.id.split(':');
// Reformat the id we will pass to jQuery (It does not understand formName:fieldName, need to escape the ':')
if (idParts.length >= 2) {
var formattedID = "#" + idParts[0] + "\\:" + idParts[1];
}
else {
var formattedID = "#" + event.target.id;
}
// Need to put a tiny delay in so the element has time to get the pasted in content.
setTimeout(function() { jQuery(formattedID).keyup(); }, 10);
};
Thanks

you can detect the paste event in js and activate your function then.
attached is a link that deals with similar problem
link
in it change what happens after the paste is detected
if (event.ctrlKey && event.keyCode == 86) //Paste event
call your function

The keyboard events do not suppose to work when clicking on the mouse (pasting, clicking, etc).
As I understand you searching for a OnChange event but the OnChange is not good for you because
you need that the event will fire in any input that the input text get.
The solution is to use the new HTML5 OnInput Event. The OnInput event fire in any input e.g. past using
the mouse, typing, pasting using the keyboard, etc.
It also support all the new browsers, I test it on: IE9,IE10,IE11,Chrome,Firefox,Safari and Opera.

The list of possible values for the event attribute is not fixed, as explained in the documentation:
Name of JavaScript event property ( onclick, onchange, etc.) of parent component, for which we will build AJAX submission code
So basically, it means that you can set in the event attribute, any onXXX event that is available on the parent component.
Regarding your problem, you can eventually duplicate your <a4j:support event="onkeyup"> with a <a4j:support event="onchange">.
Note that if your request is just to enable a text box, maybe you can do that using JavaScript, and not with Ajax call (i.e. using <a4j:support>).

How to tell when an HTML textarea has been changed by Javascript

A widget I'm using modifies an HTML textarea element. I need to know when that element has been modified and preferably I'd like to actually hide that element as well. I'm using jQuery, so I naturally tried the $('#textarea_id').change() event. But it's never triggered because I guess the textarea never loses focus.
What's the best way to monitor that textarea, preferably hidden (CSS has display:none)? Please don't tell me setInterval...

You could manage this with a global variable.
var text = "";
$('#textarea_id').bind("keyup paste", function(e){
if ($(this).val() != text)
{
// text changed
text = $(this).val();
}
});
working example: http://jsfiddle.net/n8keN/

I would use .keyup(). If you don't want the event to fire every keypress, have it restart a half second timer every keypress and have the timer trigger the things you want to happen when the user stops typing. You can play with the time to get it to your liking.