javascript - onChange 事件影响整个表单

Question

有一个简短的 Webix 表单，我试图突出显示值已更改的字段，但我坚持这一点。

这是我的代码：

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

片段：http ://webix.com/snippet/b47894fa

如您所见，该onChange事件会影响每个字段，无论它们中的哪个具有新值。有没有办法来解决这个问题？

Answer 1

您可以通过使用访问 onChange 事件的来源this.$eventSource

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

Answer 2

ValVert 使用单个事件处理程序的想法很好，但您不需要在每个视图中重复相同的事件处理代码。您可以使用表单的elementsConfig属性来定义onChange一次处理程序。这是您的示例，已清理。在表单中输入内容，然后按 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

将事件添加到每个文本而不是表单。

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");         
        }
      }
    },
  ]   
});