famo.us: how to handle textbox.onchange events

Question

I don\'t see any tutorials with text input on famo.us university. How can I add a text box surface to my app and handle onchange events?

Answer 1

You could just compose 'select' element and put it as content to the surface. After that, create listener for this surface: surface.on('deploy', method). In that method find created 'select' via document.querySelector and set onchange handler in which just emit 'change' event to the this._eventOutput/whatever.

Actual coffee file see here: https://gist.github.com/extempl/346c045c6c71b3345ac3

Answer 2

It is a bit hard to understand what you are looking to do.. But lets start out with your first question. There is currently no onchange handler option so if you want it now, you can write a subclass of InputSurface. By overriding the deploy function, while still calling InputSurface's deploy function, we can add the functionality we want, without messing around to much!

Here is a way you could add an onchange handler to a subclass of InputSurface. Just remember again onchange is only triggered after the InputSurface is blurred.

Good Luck!

var Engine            = require('famous/core/Engine');
var Surface           = require('famous/core/Surface');
var StateModifier     = require('famous/modifiers/StateModifier');
var EventHandler      = require('famous/core/EventHandler')
var InputSurface      = require('famous/surfaces/InputSurface')


function MyInputSurface(options) {
    InputSurface.apply(this, arguments);
    this.onchange = options.onchange;
    this._superDeploy = InputSurface.prototype.deploy;
}

MyInputSurface.prototype = Object.create(InputSurface.prototype);
MyInputSurface.prototype.constructor = MyInputSurface;

MyInputSurface.prototype.deploy = function deploy(target) {
  target.onchange = this.onchange;
  this._superDeploy(target);
};

var context = Engine.createContext();

var onchangeFunction = function(){ console.log("Text Changed!"); }

var myInput = new MyInputSurface({
  size: [200,60],
  onchange: onchangeFunction
})

context.add(new StateModifier({origin:[0.5,0.5]})).add(myInput);