onChange事件会影响整个表单

Question

There's a short Webix form, and I'm trying to highlight the field which value has changed, but I'm stuck with this.

Here's my code:

    webix.ui({
      view:"form",   
      width: 250,
      elements: [  
        { view:"text", label:'Phone', labelPosition: "top", name:"phone", value: "" },   
        { view:"text", label:'Email', labelPosition: "top", name:"email", value:"" },
      ],
        on:{
          onChange: function(newv, oldv){           
            webix.html.addCss(this.getNode(), "new_v");         
          }
        }   
    });

The snippet: http://webix.com/snippet/b47894fa

As you can see, the onChange event affects to each field, no matter which of them have new values. Is there a way to fix this?

Answer 1

You can access the source of onChange event by using this.$eventSource

  onChange: function(newv, oldv){           
    var source = this.$eventSource;
    webix.html.addCss(source.getNode(), "new_v");           
  }

Answer 2

ValVert's idea of using individual event handlers is good, but you don't need to repeat the same event handling code in each view. You can use the form's elementsConfig property to define the onChange handler once. Here's your example, cleaned up . Type stuff in the form, and press Enter.

 webix.ui({ view: 'form', width: 250, elementsConfig: { labelPosition: 'top', on: { onChange: function(newv, oldv) { webix.html.addCss(this.getNode(), 'new_v'); } } }, elements: [ { view: "text", label: 'Phone', name: 'phone' }, { view: "text", label: 'Email', name: 'email' }, ], }); 

 .new_v input { background-color: lightyellow; } 

 <script src="https://cdn.webix.com/edge/webix.js"></script> 

Answer 3

Add the event to each text and not to the form.

webix.ui({
  view:"form",   
  width: 250,
  elements: [  
    { view:"text", label:'Phone', labelPosition: "top", name:"phone", value: "",
      on:
      {
          onChange: function(newv, oldv){           
          webix.html.addCss(this.getNode(), "new_v");         
        }
      }
    },   
    { view:"text", label:'Email', labelPosition: "top", name:"email", value:"" ,
      on:
      {
          onChange: function(newv, oldv){           
          webix.html.addCss(this.getNode(), "new_v");         
        }
      }
    },
  ]   
});