V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
lidiya
V2EX  ›  问与答

如何使用 javascript 实现回车提交表单?

  •  
  •   lidiya · 2015-07-21 16:40:10 +08:00 · 1848 次点击
    这是一个创建于 3415 天前的主题,其中的信息可能已经有所发展或是发生改变。

    互联网发展至今,web 2.0时代,大家谈的是客户体验度、个性化服务。。。而表单提交就是网站与客户进行交互的最普通方式之一,也是使用最频繁的交互方式,如果是登陆表单,每天可能都会有大量用户登陆提交表单。

    登陆是网站为用户提供个性化服务的前提,但是在追求客户体验度的大环境下,登陆表单还是需要进行不断优化的,比如前几年就有了的,登陆时的记住密码,选中后用户下次访问网站就不必再进行登陆了,不过对于现代人对隐私性的要求及安全性的考虑,有些时候是不太适合做记住密码处理的,这样用户每次必须重新登陆才可。
    
    在网站设计上,能让用户点一下,就不要让用户点两下。出于这样的考虑,当用户输入完用户名、密码时,接下来要做的就是点击登陆,可是一般情况下,输入是在键盘上操作的,而要点击“登陆”,需要换手到鼠标,然后移动到登陆按钮上点击才能完成登陆,这样的操作虽然并不是很麻烦,但是本着精益求精的精神,我们应该压榨再压榨,把它榨干为止。
    
    其实通过JavaScript优化用户登陆页面很简单,用户输入完成,敲下回车就能实现登陆,这样的速度绝对秒杀鼠标点点吧。但处理起来有一点需要注意的,填表单的时候,一般情况下浏览器会记录用户曾经输入的内容,如果用户输入相同的内容,之前的历史会下拉显示,这时用户通过键盘方向键可以直接选择内容,回车确定,这里就需要将这样的回车区别开来,否则直接提交表单就不是我们所希望的了。
    

    // 输入回车键执行登录,但是用回车键在浏览器的历史记录中选择用户名时不触发登录
    var oldValue = null;
    $('input.someClass').unbind('keydown keyup').keydown(function(event) {
    var me = $(this);
    if (event.which == 13) {
    oldValue = me.val();
    www.maizitime.com
    }
    }).keyup(function(event) {
    var me = $(this);
    if (event.which == 13 && me.val() == oldValue) {
    // do login or some process
    }
    });

    通过回车提交表单,是不是感觉方便多了。虽然JavaScript只是一门前端开发语言,但是其能实现的页面效果远远不止这些,还能实现更多的让人眼前一亮的功能。
    

    要了解更多JavaScript的功能,可以看看:
    《JavaScript视频教程》 http://www.maiziedu.com/course/web/229-1988/

    3 条回复    2015-07-21 17:57:41 +08:00
    yangg
        1
    yangg  
       2015-07-21 17:29:55 +08:00
    表单自带的功能,不需要一句js
    <form><input/></form> 表单元素放在form里就可以了
    airyland
        2
    airyland  
       2015-07-21 17:56:48 +08:00
    lz自问自答作广告也不要发到问与答吧~
    yimity
        3
    yimity  
       2015-07-21 17:57:41 +08:00 via Android
    为啥表单自己的功能不用,要这么弄呢?按照标准写表单,这些都是自带的呢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5404 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 06:57 · PVG 14:57 · LAX 22:57 · JFK 01:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.