XF 2.1 How to register keyup event on a textbox?

asprin

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

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

JavaScript:
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?
 
On second thoughts, I updated the code as follows:

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

JavaScript:
!(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
1606401228284.png

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?
 
If you aren't using click, you need to define the expected event type in the handler. Example:

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