当按下返回键时,jQuery表单将焦点移动到下一个文本输入

时间:2016-04-06 07:14:11

标签: jquery

我创建了一个数据输入页面。此页面有几个输入框。目前,当用户在输入框中输入数据后按下返回键时,表单被提交。我希望仅在焦点位于提交按钮时才按下返回键启用表单提交。另外,它应该转向下一个输入。我尝试了几种方法,没有用。请建议一种方式

<?php
session_start();
require_once('Connections/hari.php');
$dateindian = date('d-m-Y');
$dateus = date('Y-m-d');
if (isset($_SESSION['EMPNO'])) {
    $ECNO = $_SESSION['EMPNO'];

    mysql_select_db($database_hari, $hari);
    $auth_sql2 = "SELECT pdw FROM users WHERE emp_no='$ECNO'";
    $result2 = mysql_query($auth_sql2)or die(mysql_error());
    $row2 = mysql_fetch_array($result2);
    $count = mysql_num_rows($result2);


    $_SESSION['pdw_priv'] = $row2['pdw'];
    mysql_free_result($result2);


    if ($count == 0 or $_SESSION['pdw_priv'] == 'N') {


        header('Location:unauthorised.php');
        exit();
    }
} else {
    header('Location:esl_login.php');
    exit();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <!-- DW6 -->
    <head>
        <!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>System Efficiency for Alpha/Beta Counters : : ESL, KAIGA</title>
        <link rel="stylesheet" href="css/home_style_login.css" type="text/css" />
        <link rel="stylesheet" href="css/water_quality.css" type="text/css" />
        <link href="/DatePicker.css" rel="stylesheet" type="text/css" />


        <link rel="stylesheet" href="js/jquery-ui-1.10.4.custom/css/smoothness/jquery-ui-1.10.4.custom.css" type="text/css" media="screen" />
        <script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
        <script src="../dist/jquery.validate.js"></script>

        <script type="text/javascript">

            jQuery.noConflict();
            jQuery.validator.setDefaults({
                submitHandler: function () {
                    var usin = jQuery('#usin').val();
                    var user = jQuery('#user').val();
                    var ph = jQuery('#ph').val();
                    var conductivity = jQuery('#conductivity').val();
                    var hardness = jQuery('#hardness').val();
                    var tds = jQuery('#tds').val();
                    var turbidity = jQuery('#turbidity').val();
                    var alkalinity = jQuery('#alkalinity').val();
                    var chloride = jQuery('#chloride').val();

                    jQuery.post("scripts/water_qual_add.php", {
                        "usin": usin,
                        "user": user,
                        "ph": ph,
                        "conductivity": conductivity,
                        "hardness": hardness,
                        "tds": tds,
                        "turbidity": turbidity,
                        "alkalinity": alkalinity,
                        "chloride": chloride
                    }, function (data) {

                        jQuery('#dialog-message').html(data);
                        jQuery('#dialog-message').dialog('open');
                        return false;

                        //jQuery('#usin').focus();
                    });
                }
            });

            jQuery(document).ready(function () {

                jQuery('.wql').keydown(function (e) {
                    if (e.which === 13) {
                        var index = jQuery('.wql').index(this) + 1;
                        jQuery('.wql').eq(index).focus();
                    }
                });

                jQuery("#dialog-message").dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        Ok: function () {
                            jQuery(this).dialog("close");
                            jQuery('#eff_entry').each(function () {
                                this.reset();
                            });

                            jQuery('#usin').focus();
                        }
                    }
                });

                jQuery("#datepicker").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: "dd-mm-yy",
                    altFormat: "yy-mm-dd",
                    altField: "#stddate"
                });
                jQuery('#usin').focus();
                jQuery("#eff_entry").validate();
                jQuery("#usin").change(function () {
                    var usin = jQuery('[name="usin"]').val();
                    jQuery.post("get_sample_details.php", {
                        "usin": usin
                    }, function (data) {
                        if (data.msg) {
                            // message_box.show_message(data.msg,'Please Enter a valid no.');
                            alert(data.msg);
                            jQuery('#usin').focus();
                        } else {
                            jQuery('#submit_btn').show();
                            jQuery('#comment').hide();
                            jQuery('#doc').val(data.date);
                            jQuery('#desc').val(data.description);
                            jQuery('#loc').val(data.location);
                        }
                    });
                });
            });


            function RoundIt(Value)
            {
                return(Math.round(Value * 100)) / 100;
            }


        </script>
        <style type="text/css">
            .usin{
                background-color:#FFFF99;
                color:#FF0000;}

            #rawdate{position:absolute;
                     float:left;
                     width:500px;

            }
            #calculated{
                float:right;
                width:300px;
            }

            #eff_entry label.error, #eff_entry input.submit { margin-left: 110px; font-size:10px; color:#FF0000; }

            #comment{display:none;}
            .no-close .ui-dialog-titlebar-close {  display: none;}

            div.ui-dialog{
                font-size:12px;

            }
        </style>
        <body onkeydown="if (event.keyCode == 13) {
                    event.keyCode = 9;
                    return event.keyCode;
                }">
            <!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->
            <!-- ******** BEGIN ALLWEBMENUS CODE FOR enviro_menu ******** -->
            <script type="text/javascript">
                var MenuLinkedBy = "AllWebMenus [4]", awmMenuName = "enviro_menu", awmBN = "766";
                awmAltUrl = "";
            </script>
            <script charset="UTF-8" src="enviro_menu.js" type="text/javascript"></script>
            <script type="text/javascript">awmBuildMenu();</script>
            <!-- ******** END ALLWEBMENUS CODE FOR enviro_menu ******** -->

            <div id="main">
                <div id="masthead">

                </div>
                <div id="dummy"></div>
                <!-- end masthead -->
                <div id="content">

                    <div id="welcome">Welcome&nbsp;&nbsp;<?php echo $_SESSION['EMPNAME']; ?></div>

                    <hr class="noscreen" />
                    <form id="eff_entry" name="eff_entry" action="" >
                        <fieldset>
                            <div id="rawdata">
                                <legend>Water Quality Parameters</legend>
                                <label for="usin">USIN</label>
                                <input name="usin" id="usin" type="text" class="usin" onblur="this.value = this.value.toUpperCase()" required/>
                                <br />
                                <br/>

                                <label for="ph">pH</label>
                                <input class= "wql" name="ph" id="ph" value='0.0' required />
                                <label for="conductivity">Conductivity</label>
                                <input name="conductivity" id="conductivity" value='0.0'  required   />
                                <br />
                                <label for="tds">TDS</label>
                                <input class= "wql" name="tds" id="tds" value='0.0'  required/>
                                <br/>
                                <label for="turbidity">Turbidity</label>
                                <input class= "wql" name="turbidity" id="turbidity" value='0.0'  required />
                                <br/>
                                <label for="chloride">Chloride</label>
                                <input class= "wql" name="chloride" id="chloride" value='0.0' required />
                                <br/>
                                <label for="alkalinity">Alkalinity</label>
                                <input class= "wql" name="alkalinity" id="alkalinity" value='0.0' required />
                                <br />
                                <label for="hardness">Hardness</label>
                                <input class= "wql" name="hardness" id="hardness" value='0.0' required/>
                                <label for="user"> Data Entered By</label>
                                <input  id="user" name="user" style="color:#FF0000; background-color:#FFFF33; font-weight:bold" onfocus="this.blur();" onselectstart="event.returnValue=false;" value= "<?php echo $_SESSION['EMPNO']; ?>" />
                                <br/>
                                <br/>
                                <div align="center">
                                    <input id="submit_btn" type="submit" name="submit" value="Submit" />
                                </div>
                            </div>
                            <div id="calculated">
                                <label for="loc">Location</label>
                                <input readonly="readonly" name="loc" id="loc"  /><br/>
                                <label for="desc">Type</label><br/>
                                <input readonly="readonly" name="desc" id="desc"  /><br/>
                                <label for="doc"> Date of Collection</label><br/>
                                <input readonly="readonly" name="doc" id="doc"  /><br/>

                            </div>
                        </fieldset>
                    </form>
                    <div id="type2"></div>
                </div>
            </div>

            <!--end content -->

            <!--end navbar -->
            <div id="siteInfo"><?php include('footer.php'); ?>  </div>
            <br />
            </div>
            <div id="dialog-message" class="dialog" title="Water Quality Data Entry"></div>
        </body>
</html>

2 个答案:

答案 0 :(得分:1)

快速谷歌搜索发现: How to simulate TAB on ENTER keypress in javascript or jQuery

建议使用:PlusAsTab插件。

示例:

// Change the "tab" key from "numpad +" to something else.
JoelPurra.PlusAsTab.setOptions({
  // Use enter instead of plus
  // Number 13 found through demo at
  // http://api.jquery.com/event.which/
  key: 13
});

// Exclude plus as tab to the selected elements/containers
$(".wql").plusAsTab(false);

插件演示: http://joelpurra.github.io/plusastab/example/enter-as-tab.html

答案 1 :(得分:0)

不完全一个,但你可以这样做,

 $(Identifier).keydown(function (e) {
    e.stopPropagation()
    e.preventDefault()
    switch (e.which) {
        //for enter click           
        case 13:

            //get next sibling code.
            var nextInput = $(event.target).next("wql")

            //or you also can get next tabindex using these sintax
             var nextInput = $.tabNext();

            // focus on it.
            $(nextInput).focus();

            break;
    }
});

使用任何一个var nextInput,我刚刚添加给你看。你可以使用任何人。

如果有任何错误,请通知我。