如何通过dojo检测textarea的更改

时间:2016-03-22 15:58:39

标签: javascript html dojo

require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom){

    // Create a button programmatically:
    var myButton = new Button({
        disabled:true,
        label: "Click me!",
        onClick: function(){
            // Do something:
            dom.byId("result1").innerHTML += "Thank you! ";
        }
    }, "progButtonNode").startup();

});

require(["dijit/form/Textarea","dijit/registry","dojo/dom" ,"dojo/on","dojo/domReady!"], function(Textarea,registry,dom,on){

    var textarea = new Textarea({
        name: "myarea",
        value: "This is the text area...\n\n\n\n\n\n",
        style: "width:200px;"
    }, "myarea").startup();

    //disalbe the button...
    //registry.byId("progButtonNode").set("disabled",true);

    //test
    dom.byId("result1").innerHTML += "Good!";

    //add onchange event...
    //var button = registry.byId("progButtonNode");
    alert('hi');


    on(textarea,"change",function(){
        alert('3');
        registry.byId("progButtonNode").set("disabled",false);

    });
});

以上是我的代码。

我的要求是从textarea创建后检测更改,然后设置按钮启用。 (默认情况下该按钮处于禁用状态)

我收到错误: 未捕获的TypeError:无法读取属性' on'未定义的

非常感谢!

1 个答案:

答案 0 :(得分:2)

要检测小部件Textarea上的更改,请在初始化时使用onChange

使用registry.byId()方法Buttondisabled widged和设置属性.set()设置为false {/ 1}}

工作示例:https://jsfiddle.net/41epfsdd/

请注意我已使用intermediateChanges: true这允许onChange触发每个按键更改小部件Textarea中的值。 如果您省略它或使用intermediateChanges: falseonChange事件只会在字段模糊时触发。

require(["dijit/form/Button", "dijit/form/Textarea", "dijit/registry", "dojo/dom", "dojo/on", "dojo/domReady!"], function(Button, Textarea, registry, dom, on) {

  var myButton = new Button({
    disabled: true,
    label: "Click me!"
  }, "progButtonNode").startup();

  var textarea = new Textarea({
    name: "myarea",
    value: "This is the text area...\n\n\n\n\n\n",
    intermediateChanges: true,
    onChange: function() {
      var progButtonNode = registry.byId('progButtonNode');
      progButtonNode.set('disabled', false);
    }
  }, "myarea").startup();
});

编辑: 关于如何在已生成的Textarea小部件上应用事件处理程序的评论。您可以使用dojo/on示例:

require(["dojo/on"], function(on){
  on(target, "event", function(e){
    // handle the event
  });
});

基于您的评论的示例:

on(this.lastCommentTextArea, 'change', function(event){ 
   // handle the event
})