Question

我有一个简单的表单，在inputText类型的字段上有一个onchange事件。

单击另一个对象时，Onchange事件开始。示例保存按钮。

代码运行但是onchange按钮上的onchange丢失了。

我附上了重现问题的页面的示例代码。

建议？

    <?xml version="1.0" encoding="UTF-8"?>
    <xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:div style="padding:20px;"></xp:div>
    <xp:button value="Save" id="button1" style="margin:20px;">
    <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
    <xp:this.action><![CDATA[#{javascript:print('click');}]]></xp:this.action>
    <xp:this.script><![CDATA[alert('click');]]></xp:this.script>
    </xp:eventHandler>
    </xp:button>
    <xp:radioGroup id="radioGroup1" style="margin:20px;">
    <xp:selectItem itemLabel="val1"></xp:selectItem>
    <xp:selectItem itemLabel="val2"></xp:selectItem>
    <xp:selectItem itemLabel="val3"></xp:selectItem>
    <xp:eventHandler event="onchange" submit="true" refreshMode="complete">
    <xp:this.action><![CDATA[#{javascript:print('onchange - radiobutton');}]]></xp:this.action>
    </xp:eventHandler>
    </xp:radioGroup>
    <xp:inputText id="inputText1" style="margin:20px;">
    <xp:eventHandler event="onchange" submit="true" refreshMode="complete">
    <xp:this.action><![CDATA[#{javascript:print('onchange - start');
    var millis = 10000;
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); } 
    while(curDate-date < millis);
    print('onchange - finish');}]]></xp:this.action>
    </xp:eventHandler>
    </xp:inputText>
    </xp:view>

Answer 1

您可以通过oninput事件代替onchange来执行此操作。只需更改eventHandler中的event属性即可。然而，

IE9之前不支持，
每次击键都会触发可能对用户体验不利的事件
如果是部分刷新，当刷新结束时，如果焦点不是表单中的第一个项目，焦点将转移到另一个组件。再次，对用户体验不利。

您还可以在onkeyup事件上触发CSJS代码，以便将另一个组件集中在页面上。因此它会刷新页面。您可以使用setTimeout()函数执行此操作，因此，如果用户暂时不按任何键，则会触发刷新。

Answer 2

感谢您的回复，但我认为这些解决方案对用户体验不利。

我认为只有可能的解决方案是： 1禁用服务器onchange事件并添加刷新按钮 2尽可能使用onchange client js event

其他建议？

XPages - inputtext字段上的onchange事件丢失了

2 个答案: