• 一个页面多个input 按钮 如何回车控制


    项目完成了,完善也是一份重中之重的工作!至于你做的网站炫还是不炫?个人认为人性化很重要!尤其是B2C网站……如何做到项目人性化?只有不断的去发现和完善了!

        购物网站已做好,目前也在新增一些新功能、SEO、及代码优化的工作!昨天运营部门同事找到我说“一般网站登录、注册填写完信息后,直接回车就可以登录或者注册了,没必要一定要单击鼠标确认啊?问我可不可以做到?” 我和他说 “不好控制。”因为之前有做过,也google了 也没找到一二,但是自己没有研究下 :)(个人感觉自己js不怎么的所以就……)

    还解释了下,之前的做法是这个

    <body onkeydown='onEnterDown();'>
    <script language='javascript'>
    function onEnterDown(){
    if(window.event.keyCode == 13){
    Login();
    }
    }
    function Login(){
    ………………
      ………………
    }
    </script>

    一个页面多个input 按钮,我怎么知道用户回车是想登录还是注册还是其他呢??反问了我们的运营部同事? 虽然IT这行业没做过几年,但是有个信念一直支配着我“只要能想到的代码一定能实现”。

                 下班回家整出来了:>    如下

    例如我这个项目:

          前台代码:

        搜索

        <fieldset>
                <legend>搜索</legend>
                <input id="txtSearch" type="text" class="input" />
                <input id="btnSubmit" type="button" class="btn" onclick="search();return false;" />
            </fieldset>

        注册登录页面

             <!--会员登录--> 

                              <legend>会员登录</legend>
                                <div>
                                    <em class="title">用户名:</em><em><input  value='<%=Session["51fanli_Email"]==null?"":Session["51fanli_Email"].ToString() %>' class="input" type="text" id="loginUname" onchange="checkEmail('loginUnameErroMsg',this.value)"
                                        onblur="checkEmail('loginUnameErroMsg',this.value)" maxlength="50" /></em></div>
                                <div id="UserNameDiv" style="display: none">
                                    <em class="title"></em><em id="loginUnameErroMsg"></em>
                                </div>
                                <div>
                                    <em class="title">密&nbsp;&nbsp;&nbsp;&nbsp;码:</em> <em>
                                        <input class="input" type="password" id="loginPwd" onblur="checkPwd('loginPwdErrorMsg',this.value);"
                                            maxlength="20" /></em><em></em></div>
                                <div id="PwdDiv">
                                    <em class="title"></em><em id="loginPwdErrorMsg" class="status"></em>
                                </div>

          <!--重新激活-->

           <div class="inner clearFix">
                            <h2>
                                密码忘记了?</h2>
                            <div>
                                请填写您注册时的Email地址,我们会将修改密码的链接发送邮件给您</div>
                            <div>
                                <input id="txtRecPwd" class="input" type="text" onchange="RetrievePassword(0)" onblur="RetrievePassword(0)"
                                    value="" maxlength="50" />
                                <input id="btnRecPwd" type="button" value="发送" class="btnC1" onclick="RetrievePassword(1)" /></div>
                            <div id="RecPwdDiv">
                                <em class="title"></em><em id="RecPwdMsg" class="status"></em>
                            </div>
                        </div>

            <!--重新激活-->

            <div class="btn">
                                    <em class="title"></em><em>
                                        <input id="btnLogin" type="button" value="登录" class="btnC1" onclick="Login()" /></em>
                                    <em><a href="/Re-Activation.aspx">重新激活</a></em>
                                </div>

    函数可以这样即可实现多个button 回车控制

    $(function() {
                //搜索按钮
                $("#txtSearch").keypress(function(e) {
                    var key = window.event ? e.keyCode : e.which;
                    if (key.toString() == "13") {
                        search(); return false;
                    }
                });

                //登录按钮LoginPwd
                $("#loginPwd").keypress(function(e) {
                    var key = window.event ? e.keyCode : e.which;
                    if (key.toString() == "13") {
                        Login(); return false;
                    }
                });
                //密码忘记
                $("#txtRecPwd").keypress(function(e) {
                    var key = window.event ? e.keyCode : e.which;
                    if (key.toString() == "13") {
                        RetrievePassword(1); return false;
                    }
                });
            });

    就是控制用户输入的最后一个input,根据这个input事件keypress 来判断用户回车是想控制那个input按钮

    这是个人的发现!可能有不足 !也请群里面的大侠指点指点!有更好的方法 麻烦拿出来大家分享一下   呵呵 3Q……



    作者:PEPE
    出处:http://pepe.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    iOS开发——UI基础-自定义构造方法,layoutSubviews,Xib文件,利用Xib自定义View
    iOS开发——UI基础-懒加载,plist文件,字典转模型,自定义view
    iOS开发——UI基础-按钮的创建和设置
    iOS开发——UI基础-Xcode资源拷贝
    机器学习中的数学基础_七月算法4月机器学习班第1次课程笔记
    leetcode--Merge Sorted Array
    leetcode--First Missing Positive
    leetcode--Divide two integers
    leetcode--Implement strStr()
    leetcode--Remove Element
  • 原文地址:https://www.cnblogs.com/PEPE/p/2051785.html
Copyright © 2020-2023  润新知