使用javascript的onblur和onkeyup事件对输入作check的问题

[weicaizhi]

请大家先耐心听我讲完这个问题，比较纠结：现在有一个这样的功能实现，页面有一组输入框，每完成一个输入后，光标会自动定位到下一输入框，这个功能我是用onkeyup事件来实现，就是判断输入长度是否满足，如果满足光标就向下一个跳转。但是在这个跳转前要先对这个输入框的内容作check，如果非法输入，将会弹出alert警告并保留原来光标位置。以上功能我都能用一个onkeyup事件来实现。除此之外还有一个功能实现，就是如果输入框输入非法触发完onkeyup事件光标保留当前输入框后，若此时用鼠标点击其他地方时还要弹出警告alert提示输入不正确，这个功能我是用onblur实现的，以上这两个功能我都能单独实现，可是放在一起这光标就不好控制了，求js达人帮忙啊。其实最后就是为了实现＂当前输入框输入不正确，光标无论如何都不会跳转并alert警告（包括鼠标点击其他地方），如果输入正确光标自动跳转到下一输入框！＂这功能，万分感谢！

[NemoAlex]

录入长度验证可以用 onchange 么

[NemoAlex]

其实只要 onchange 就可以了，不用 blur
onchange -> 长度是否够 -> 不够没事，如果够了 -> 是否正确 -> 不正确的话提示，如果正确 -> 下一个input

够不够清楚呢

[weicaizhi]

@NemoAlex 恩明白，但是有一个问题就是当那个提示完了以后，如果我没有修改输入（也就是没有change），而是鼠标点击了其他地方，这个时候也是要报提示信息并且光标不变的。

[NemoAlex]

@weicaizhi 为什么要有这么暴力的交互啊
一般来说，表单的强制验证只要在提交之前进行一下就可以了
其余的时候提醒一下就好，不要打断用户录入，其实 alert 已经是比较不友好的方式了

[weicaizhi]

@NemoAlex 我也觉得超级恶心的啊，这是一个对日项目，日本人这思路确实是。。。

[NemoAlex]

@weicaizhi 哈哈，需求定得那么细？那就按他说的来
可以在 body 之类的比较空的地方加 click 事件，验证几个输入框的完整性
再在几个输入框上加 click 事件来 stopPropagation，注意 IE 要用 cancelBubble

[NemoAlex]

@weicaizhi 当然这属于比较快速丑陋的实现之一，只是提供一个思路
睡觉去了先

[weicaizhi]

@NemoAlex 什么什么？！能否再说的详细点，什么click事件？麻烦。。。

[NemoAlex]

@weicaizhi
例如 document.body.onclick = function() { //TODO:这里是验证 }
问题在于：点击那几个页面的所有地方都会触发 body 的 onclick
于是你需要在不想触发事件的地方加上 .onclick = function(e) {e.stopPropagation();} 这样的停止事件冒泡传递
很丑陋吧 ;)

[benzhe]

测试过下面的代码好像可以

http://jsfiddle.net/dzQWc/9/

[weicaizhi]

@NemoAlex 刚刚和测试组商量了一下，决定还是在提交的时候再验证，之前这个想法实在是太变态了。

[weicaizhi]

@benzhe 首先感谢，但是你这个方法貌似还是没有实现我说的那个“除此以外”的情况。