CODEWITHSUNDEEP
javascriptjsfdom-eventsrichfaces
Thomas Buckley
Thomas Buckley

Reputation: 6056

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

Upvotes: 3

Views: 7164

Answers (3)

Roy Shoa
Roy Shoa

Reputation: 3195

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.

Upvotes: 1

Aba Dov
Aba Dov

Reputation: 962

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

Upvotes: 1

Romain Linsolas
Romain Linsolas

Reputation: 81647

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>).

Upvotes: 0

Related Questions