jQuery form move focus zur nächsten Texteingabe, wenn die Eingabetaste gedrückt wird

Ich habe eine Seite für die Dateneingabe erstellt. Diese Seite hat mehrere Eingabefelder. Wenn der Benutzer die Eingabetaste nach Eingabe der Daten in das Eingabefeld drückt, wird das Formular übermittelt. Ich möchte das Senden von Formularen nur dann aktivieren, wenn Sie die Eingabetaste drücken, wenn der Fokus auf der Senden-Schaltfläche liegt. Andernfalls sollte es zur nächsten Eingabe gehen. Ich habe mehrere Methoden ausprobiert, nichts hat funktioniert. Bitte legen nahe, einen WegjQuery form move focus zur nächsten Texteingabe, wenn die Eingabetaste gedrückt wird

<?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>

Quelle

2016-04-06 mansoondreamz

Mögliche Duplikat [Wie TAB simulieren auf ENTER keypress in JavaScript oder jQuery] (http://stackoverflow.com/questions/8546252/ how-to-simulieren-tab-on-enter-keypress-in-javascript-or-jquery) –

Nicht einen genauen, aber Sie können wie diese tun,

$(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; 
    } 
});

verwenden Sie einen var nextInput, ich Sie gerade hinzugefügt zu zeigen. Du kannst jeden benutzen.

Wenn es einen Fehler gibt, benachrichtigen Sie mich bitte.

Quelle

2016-04-06 07:29:52 Bharat

Sie könnten wahrscheinlich den nächsten Tabindex verwenden, wenn er existiert und nicht nur das nächste Element (da dies der ganze Zweck dieses Attributs ist). – apokryfos

ja, ich werde meine antwort..danke .. – Bharat

Eine schnelle Google-Suche gefunden: How to simulate TAB on ENTER keypress in javascript or jQuery

Es empfiehlt das: PlusAsTab Plugin.

Beispiel:

// 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);

Plugin Demo: http://joelpurra.github.io/plusastab/example/enter-as-tab.html

Quelle

2016-04-06 07:36:23

jQuery form move focus zur nächsten Texteingabe, wenn die Eingabetaste gedrückt wird

Antwort

Verwandte Themen