JSF richfaces的dataTable组件中filter在IE和Firefox下不兼容的问题

JSF richfaces的dataTable组件是一个用于显示列表数据的控件，可以方便地支持数据分页，条件过滤等常用功能，其中的filter就是用于根据用户的输入过滤出符合条件的记录，但是filter在IE和firefox浏览器下不兼容。

 

问题的描述：

 

filter的使用如下：

<rich:dataTable> <rich:column filterBy="......" filterEvent="......" filterValue="......"/> </rich:dataTable> 

如果filterEvent的值为oninput时，IE和Firefox浏览器都支持，但是有一个弊端是每次输入一个字符时都会触发filter自动过滤，如果数据量比较大时，频繁过滤不是很方便，效率也比较低下。另外很多时候人们习惯于输入完之后点击回车键才过滤，因此将filterEvent的值改为onchange，测试发现bug:

IE输入完成点击回车没有反应，必须手动点击鼠标使鼠标失去焦点才会触发filter起作用。

Firefox输入完成之后点击回车自动触发filter，功能正常。

网上查询得知IE和Firefox对onchange事件的支持不同，IE必须使用onpropertychange才可以实现firefox浏览器onchange同样功能的事件。

 

解决办法：

查询richfaces的参考文档发现，dataTable的filterEvent事件默认是鼠标失去焦点的onblur事件，因此解决思路如下：

为整个dataTable添加键盘按键事件，当捕获到按回车键事件时，让filter失去焦点即可，具体代码如下：

 

<mce:script type="text/javascript"><!-- function doFilter(event){ //捕获IE和Firefox的键盘事件 event = event || window.event; code = event.keyCode; //处理回车按键事件 if (code == 13) { if(event.srcElement.id == "filter输入框id"){ //让filter输入框失去焦点 event.srcElement.blur(); } } } // --></mce:script> <rich:dataTable οnkeyup="doFilter(event)"> <rich:column filterBy="......" filterValue="......"/> </rich:dataTable> 

经过测试发现，IE和Firefox浏览器在filter输入结束点击回车之后，均自动触发filter，达到预期要求，完美解决问题。