有一个简短的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
事件会影响每个字段,无论哪个字段都有新值。有办法解决这个问题吗?
答案 0 :(得分:0)
将事件添加到每个文本而不是表单。
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");
}
}
},
]
});
答案 1 :(得分:0)
您可以使用this.$eventSource
onChange: function(newv, oldv){
var source = this.$eventSource;
webix.html.addCss(source.getNode(), "new_v");
}
答案 2 :(得分:0)
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>