V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
weicaizhi
V2EX  ›  JavaScript

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

  •  
  •   weicaizhi · 2012-06-20 23:47:26 +08:00 · 3648 次点击
    这是一个创建于 4542 天前的主题,其中的信息可能已经有所发展或是发生改变。
    请大家先耐心听我讲完这个问题,比较纠结:现在有一个这样的功能实现,页面有一组输入框,每完成一个输入后,光标会自动定位到下一输入框,这个功能我是用onkeyup事件来实现,就是判断输入长度是否满足,如果满足光标就向下一个跳转。但是在这个跳转前要先对这个输入框的内容作check,如果非法输入,将会弹出alert警告并保留原来光标位置。以上功能我都能用一个onkeyup事件来实现。除此之外还有一个功能实现,就是如果输入框输入非法触发完onkeyup事件光标保留当前输入框后,若此时用鼠标点击其他地方时还要弹出警告alert提示输入不正确,这个功能我是用onblur实现的,以上这两个功能我都能单独实现,可是放在一起这光标就不好控制了,求js达人帮忙啊。其实最后就是为了实现"当前输入框输入不正确,光标无论如何都不会跳转并alert警告(包括鼠标点击其他地方),如果输入正确光标自动跳转到下一输入框!"这功能,万分感谢!
    12 条回复    1970-01-01 08:00:00 +08:00
    NemoAlex
        1
    NemoAlex  
       2012-06-20 23:51:35 +08:00
    录入长度验证可以用 onchange 么
    NemoAlex
        2
    NemoAlex  
       2012-06-20 23:59:09 +08:00   ❤️ 1
    其实只要 onchange 就可以了,不用 blur
    onchange -> 长度是否够 -> 不够没事,如果够了 -> 是否正确 -> 不正确的话提示,如果正确 -> 下一个input

    够不够清楚呢
    weicaizhi
        3
    weicaizhi  
    OP
       2012-06-21 00:01:59 +08:00
    @NemoAlex 恩明白,但是有一个问题就是当那个提示完了以后,如果我没有修改输入(也就是没有change),而是鼠标点击了其他地方,这个时候也是要报提示信息并且光标不变的。
    NemoAlex
        4
    NemoAlex  
       2012-06-21 00:10:33 +08:00
    @weicaizhi 为什么要有这么暴力的交互啊
    一般来说,表单的强制验证只要在提交之前进行一下就可以了
    其余的时候提醒一下就好,不要打断用户录入,其实 alert 已经是比较不友好的方式了
    weicaizhi
        5
    weicaizhi  
    OP
       2012-06-21 00:14:49 +08:00
    @NemoAlex 我也觉得超级恶心的啊,这是一个对日项目,日本人这思路确实是。。。
    NemoAlex
        6
    NemoAlex  
       2012-06-21 00:23:47 +08:00
    @weicaizhi 哈哈,需求定得那么细?那就按他说的来
    可以在 body 之类的比较空的地方加 click 事件,验证几个输入框的完整性
    再在几个输入框上加 click 事件来 stopPropagation,注意 IE 要用 cancelBubble
    NemoAlex
        7
    NemoAlex  
       2012-06-21 00:27:23 +08:00
    @weicaizhi 当然这属于比较快速丑陋的实现之一,只是提供一个思路
    睡觉去了先
    weicaizhi
        8
    weicaizhi  
    OP
       2012-06-21 00:31:01 +08:00
    @NemoAlex 什么什么?!能否再说的详细点,什么click事件?麻烦。。。
    NemoAlex
        9
    NemoAlex  
       2012-06-21 00:36:31 +08:00
    @weicaizhi
    例如 document.body.onclick = function() { //TODO:这里是验证 }
    问题在于:点击那几个页面的所有地方都会触发 body 的 onclick
    于是你需要在不想触发事件的地方加上 .onclick = function(e) {e.stopPropagation();} 这样的停止事件冒泡传递
    很丑陋吧 ;)
    benzhe
        10
    benzhe  
       2012-06-21 01:29:19 +08:00
    测试过下面的代码好像可以

    http://jsfiddle.net/dzQWc/9/
    weicaizhi
        11
    weicaizhi  
    OP
       2012-06-21 09:18:22 +08:00
    @NemoAlex 刚刚和测试组商量了一下,决定还是在提交的时候再验证,之前这个想法实在是太变态了。
    weicaizhi
        12
    weicaizhi  
    OP
       2012-06-21 09:25:24 +08:00
    @benzhe 首先感谢,但是你这个方法貌似还是没有实现我说的那个“除此以外”的情况。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1877 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:30 · PVG 00:30 · LAX 08:30 · JFK 11:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.