如何解决Vaadin 14,Safari 13:具有输入事件侦听器的文本字段不会触发ValueChangeListener
在Vaadin 14.3.2应用程序中,我创建了自己的数字字段,用于格式化(数字)输入。
因此,我创建了一个像这样的类:
mask = df1['val']
f = lambda x: DeepDiff(x['old'],x['new'])['values_changed']
df1.loc[~mask,'val'] = df1[~mask].apply(f,axis=1)
print (df1)
new old val
0 a a True
1 b e {'root': {'new_value': 'b','old_value': 'e'}}
2 c,d d {'root': {'new_value': 'c,d','old_value': 'd'}}
3 d d True
4 a a True
5 b e {'root': {'new_value': 'b','old_value': 'e'}}
6 c,'old_value': 'd'}}
7 d d True
8 a a True
9 b e {'root': {'new_value': 'b','old_value': 'e'}}
10 c,'old_value': 'd'}}
11 d d True
和my-number-field.js中的一些JavaScript(请参见下文)进行格式化。 这种格式在Chromium,Chrome,Edge,Firefox和Safari 13.1.3中都可以正常工作。
在Safari中,发生这种情况时,不会在服务器端触发ValueChangeListener:
@Tag("my-number-field")
@JsModule("./js/my-number-field.js")
public class MyNumberField extends TextField {
[...]
}
这是我的代码的一些最小片段,仍然显示了行为:
inputElement.value = [newValue];
当我注释(function() {
customElements.whenDefined('vaadin-text-field').then(() => {
class MyNumberField extends customElements.get('vaadin-text-field') {
constructor() {
super();
}
static get is() {
return 'my-number-field';
}
ready() {
super.ready();
this.addEventListener('input',this.formatInput,true);
}
formatInput (event) {
const inputElement = this.inputElement;
const originalInputValue = inputElement.value;
// this is the re-formatting
inputElement.value=originalInputValue+'0';
};
}
customElements.define(MyNumberField.is,MyNumberField);
});
})();
行时,服务器端的ValueChangeListener将获得输入的值。激活该行后,ValueChangeListener不会获得输入的/新格式化的值。
有没有办法在Safari中触发ValueChangeListener?
解决方法
更新(也许是我的解决方案):将MyNumberField的ValueChangeMode设置为ON_BLUR可以工作:
public MyNumberField(...) {
this.setValueChangeMode(ValueChangeMode.ON_BLUR);
}
EAGER也可以使用。 LAZY也可以。超时也可以。
仅ON_CHANGE不起作用,这在TextField构造函数中设置为默认值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。