XF 2.1 How to register keyup event on a textbox?

[asprin]

I'm using the following code but the do not see the keyup event firing on the textbox.

<xf:textbox autocomplete="off" data-xf-keyup="player-autocomplete" name="q" placeholder="Start typing a name" />

var asprin = window.asprin || {};

!(function($, window, document, _undefined) {
  'use strict';

    asprin.Autocomplete = XF.Element.newHandler({
    eventNameSpace: 'asprinAutocomplete',

    init: function() {
      console.log('init');
    },

    keyup: function(event){
        console.log('typed');
    }
});

  XF.Event.register('keyup', 'player-autocomplete', 'asprin.Autocomplete');
})(jQuery, window, document);

When I try to type something in the input box, console was reporting the following error:

Uncaught TypeError: g[h]._onEvent is not a function

which means I'm not registering the keyup event right. Any suggestions?

 

[truonglv]

Change keyup function to _onEvent or onEvent?

 

[asprin]

Change keyup function to _onEvent or onEvent?

I was merely following the data-xf-change example and that seemed to work fine for select tags. So not sure if renaming the function to _onEvent. Are you certain this is not the "hacky" way of resolving the issue?

 

[asprin]

which means I'm not registering the keyup event right.

On second thoughts, the keyup event seems to have been registered as I get the logs in Console on each keyup. But I'm assuming it's not able to find the event handler.....

 

[Mike]

asprin.Autocomplete = XF.Element.newHandler({

That line is wrong. You're registering an element handler (which is handled via data-xf-init) as an event handler. You want XF.Event.newHandler().

 

[asprin]

Ouch! Makes sense!

 

[asprin]

On second thoughts, I updated the code as follows:

<xf:textbox autocomplete="off" data-xf-keyup="player-autocomplete" name="q" placeholder="Start typing a name" />

!(function($, window, document, _undefined) {
  'use strict';
  
asprin.PlayerAutocomplete = XF.Event.newHandler({
    eventNameSpace: 'asprinPlayerAutocomplete',

    init: function() {
      console.log('init');   
    },

    keyup: function(event){
      console.log('keyup');   
    }
});

  XF.Event.register('keyup', 'player-autocomplete', 'asprin.PlayerAutocomplete');
})(jQuery, window, document);

When I tried typing in the textbox, I got the following in console


This goes away if I put a "click" function, but the "keyup" function doesn't get called at all. Instead, whatever is inside "click" function gets executed.

Any suggestions?

 

[Mike]

If you aren't using click, you need to define the expected event type in the handler. Example:

XF.TextEdit = XF.Event.newHandler({
   eventType: 'focus',
   eventNameSpace: 'XFTextEdit',

 

[asprin]

If you aren't using click, you need to define the expected event type in the handler. Example:

XF.TextEdit = XF.Event.newHandler({
   eventType: 'focus',
   eventNameSpace: 'XFTextEdit',

Yup! That works as intended. Thanks.