IE8以下实现焦点置回功能遇到的设计问题

 

最近在写一个web小项目，设计了如下交互环节：

某页面包含两个以上的文本输入框，每个文本框都对输入内容有的校验规则（其中的一条就是不允许输入内容为空）；

当用户在某文本输入框中输入文本内容后离开输入框时，用jquery绑定blur事件进行校验文本格式是否正确，如果不正确则重新将焦点置回该输入框。

 

产生bug步骤如下：

当我在第一个输入框中输入不符合格式的文本时直接点击进入另外一个需要校验的输入框时，IE8以下版本的浏览器直接崩溃无法响应。

 

分析如下：

由于在离开第一个输入框时触发了blur事件，需要将在第二个输入框的焦点置回第一个输入框中，

而在离开第二个输入框时同样触发了blur事件，检查此时的文本值为空不符合验证条件又需要将在第一个输入框的焦点置回第二个焦点。。。。

好了，死循环出现了。。。。

 

虽然Chrome、Firefox、Ie9都十分智能屏蔽了这样消耗内存的举动，但是还有老版本的IE在告诉我们设计交互时逻辑要严谨，不然弄巧成拙就不好了。

 

（虽然这样的交互设计比较少见，也许真的不一定是交互性好，但是作为技术探讨，大家可以研究一下如何实现这样的问题避免死循环）