famo.us - famo.us：如何处理 textbox.onchange 事件

Question

我在 famo.us 大学上没有看到任何带有文本输入的教程。如何向我的应用程序添加文本框表面并处理onchange事件？

Answer 1

您可以只编写“选择”元素并将其作为内容放到表面上。之后，为此表面创建侦听器：surface.on('deploy', method). 在该方法中找到创建的“选择”document.querySelector并设置处理程序，其中只向/whateveronchange发出“更改”事件。this._eventOutput

实际咖啡文件见这里：https ://gist.github.com/extempl/346c045c6c71b3345ac3

Answer 2

有点难以理解您要做什么。但是让我们从您的第一个问题开始。当前没有 onchange 处理程序选项，因此如果您现在需要，可以编写 InputSurface 的子类。通过重写 deploy 函数，同时仍然调用 InputSurface 的 deploy 函数，我们可以添加我们想要的功能，而不会乱七八糟！

这是一种可以将 onchange 处理程序添加到 InputSurface 子类的方法。再次记住 onchange 仅在 InputSurface 模糊后触发。

祝你好运！

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