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

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

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

Answer 2

您可以使用this.$eventSource

访问onChange事件的来源

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

Answer 3

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

onChange事件影响整个表单

3 个答案: