Skip input in Form with Enter key

Navigation
0

Good day to all, I would like you to collaborate with me, I want that at the moment of input it is not with the Tab key but with Enter, this is my code, Thank you very much for the help. 

  <?php

session_start();

if (empty($_SESSION["DataUser"]["idUsuario"])){
    header("Location: login.php");
}
$_SESSION["user"]=$_SESSION["DataUser"]["idUsuario"];
?>


<!DOCTYPE html>

<html>
<head>

    <meta charset="utf-8" />
    <title>Sanoha Ltda</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
    <meta content="Coderthemes" name="author" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/Icono_Sanoha.ico">



    <!-- CONTROLADORES NECESARIOS -->
    <?php require "../../../../Controlador/trabajadorController.php";?>
    <?php require "../../../../Controlador/novedadController.php";?>


    <!-- INCLUDE SCRIPTS -->
    <?php include ("Pages/Includes/Imports.php") ;?>

    <!-- ESTILO TABLA -->
    <style>
        table, th, td {
            border: 1px solid #206736;
        }
    </style>



</head>


<body>

<!--Begin Page-->
<div id="wrapper">

    <!-- Top Bar Start -->
    <?php include ("Pages/Includes/Top-Bar.php")?>
    <!-- Top Bar End -->


    <!-- ========== Left Sidebar Start ========== -->
    <?php include("Pages/Includes/Left-Sidebar.php")?>
    <!-- Left Sidebar End -->


    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="content-page">

        <!-- Start content -->
        <div class="content">
            <div class="container-fluid" >

                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <h4 class="page-title float-left">Betéitiva</h4>

                            <ol class="breadcrumb float-right">
                                <li class="breadcrumb-item"><a href="Index.php">Sanoha Ltda</a></li>
                                <li class="breadcrumb-item"><a href="adminUsuario.php">Betéitiva</a></li>
                                <li class="breadcrumb-item active">Reporte Diario</li>
                            </ol>

                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <!-- end row -->


                <div class="row">

                    <div id="alertas" class="center-page">
                        <?php if(!empty($_GET["respuesta"]) && $_GET["respuesta"] == "correcto"){ ?>
                            <div class="alert alert-icon alert-success alert-dismissible fade show">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                <i class="mdi mdi-check-all"></i>
                                <strong>Registrado!</strong> Ha registrado exitosamente el reporte. Para tener un informe
                                quincenal ingrese
                                <a href="index.php" class="alert-link">Aquí</a> .
                            </div>
                        <?php } ?>

                    </div>


                    <div class="col-lg-12 center-page">

                        <div class="card-box">

                            <h4 class="text-center text-custom"><strong>REPORTE DIARIO BETÉITIVA</strong></h4>

                            <p class="text-muted font-14 m-b-20" align="justify">
                                Aquí usted puede registrar las labores mineras que se están creando. Recuerde que debe tener
                                los datos requeridos que son: Descripción y Abreviatura.
                            </p>

                            <br>

                            <br>

                            <form role="form" method="post" action="../../../../Controlador/reporteBeteitivaController.php?action=crear">

                                <div class="row ">
                                    <div class="col-xs-9 center-page" style="width: 83%">

                                        <div class="row ">

                                            <div class="col-lg-6">
                                                <label for="Trabajador"><strong>Trabajador</strong><span class="text-danger">*</span></label>
                                                <select class="selectpicker show-tick" data-style="btn-verde btn-bordered" id="Trabajador" name="Trabajador" required >
                                                    <?php echo trabajadorController::selectTrabajadorBeteitiva(true, "idTrabajador", "idTrabajador", "form-control"); ?>

                                                </select>
                                            </div>

                                            <div class="col-lg-6">
                                                <label for="Labor"><strong>Labor Minera</strong></label>
                                                <input type="text" id="Labor" class="form-control" disabled="" >
                                            </div>

                                        </div>

                                        <br>

                                        <div class="row">
                                            <div class="col-lg-6">
                                                <label for="Nombre"><strong>Nombre</strong></label>
                                                <input type="text" id="Nombre" class="form-control" disabled="" >
                                            </div>

                                            <div class="col-lg-6">
                                                <label for="Centro"><strong>Centro Costo</strong></label>
                                                <input type="text" id="Centro" class="form-control" disabled="" >
                                            </div>
                                        </div>

                                        <br>

                                        <div class="row">
                                            <div class="col-lg-6">
                                                <label for="Frente"><strong>Frente Trabajo</strong></label>
                                                <input type="text" id="Frente" class="form-control" disabled="" >
                                            </div>

                                            <div class="col-lg-6">
                                                <label for="Fecha"><strong>Fecha</strong><span class="text-danger">*</span></label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" placeholder="yyyy/mm/dd"  name="Fecha" id="datepicker-autoclose">
                                                    <span class="input-group-addon bg-success b-0"><i class="mdi mdi-calendar text-white"></i></span>
                                                </div><!-- input-group -->
                                            </div>

                                        </div>

                                        <br>

                                        <br>


                                        <div class="row" >
                                            <div class="col-lg-12 "  >

                                                <table class="table m-0 table-colored table-success " >
                                                    <thead>
                                                    <tr>

                                                        <th style="text-align: center" data-toggle="tooltip" title="Vagoneta de Carbón">VC</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Vagoneta de Roca">VR</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Puerta de Avance">PA</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Puerta Refuerzo Guía">PRG</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Puerta Refuerzo Inclinado">PRI</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Tacos">TAC</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Tramos de Carrilera">TRM</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Malacate">MLC</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Benda">BENDA</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Envasada">EVS</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td><input style="text-align: center" type="text" value="0" name="VC" class="form-control" onkeypress="return valida(event)"></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="VR" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="PA" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="PRG" class="form-control" onkeypress="return valida(event)"></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="PRI" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="TAC" class="form-control" onkeypress="return valida(event)"></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="TRM" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="MLC"  class="form-control" onkeypress="return valida(event)"></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="BENDA" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="EVS" class="form-control" onkeypress="return valida(event)"></td>

                                                    </tr>
                                                    </tbody>
                                                </table>

                                            </div>

                                        </div>


                                        <br>


                                        <div class="row" >
                                            <div class="col-lg-10 center-page" >

                                                <table class="table m-0 table-colored table-success " >
                                                    <thead>
                                                    <tr>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Administracion">ADM</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Cargue">CRG</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Cuadros">CDS</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Canastas">CNST</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Metros de Avance">MTA</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Metros de Ensanche">MTDCH</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Metros de Destape">MTDPT</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Otros">Otros</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td><input style="text-align: center" type="text" value="0" name="ADM" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="CRG" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="CDS" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="CNST" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="MTA" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="MTDCH" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="MTDPT" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="Otros" class="form-control" onkeypress="return valida(event)" ></td>

                                                    </tr>
                                                    </tbody>
                                                </table>

                                            </div>

                                        </div>


                                        <br>

                                        <br>

                                        <br>

                                        <div class="row">
                                            <div class="col-lg-2 center-page" >
                                                <label for="Asistio"><strong>Asistió</strong><span class="text-danger">*</span></label>
                                                <select class="selectpicker show-tick" data-style="btn-verde btn-bordered" id="Asistio" name="Asistio" required >
                                                    <option>Si</option>
                                                    <option>No</option>
                                                </select>
                                            </div>

                                            <div class="col-lg-4 center-page">
                                                <label for="Novedad"><strong>Novedad</strong><span class="text-danger">*</span></label>
                                                <select class="selectpicker show-tick" data-style="btn-verde btn-bordered" id="Novedad" required name="Novedad">
                                                    <?php echo novedadController::selectNovedad(true, "idNovedad", "idNovedad", "form-control"); ?>
                                                </select>
                                            </div>

                                            <div class="col-lg-2 center-page">
                                                <label for="Horas"><strong>Horas Trabajo</strong><span class="text-danger">*</span></label>
                                                <input type="number" id="Horas" name="HorasTrabajo" class="form-control" required  >
                                            </div>

                                            <div class="col-lg-4 center-page">
                                                <label for="Observaciones"><strong>Observaciones</strong><span class="text-danger">*</span></label>
                                                <textarea class="form-control" name="Observaciones" rows="5" required></textarea>
                                            </div>

                                        </div>

                                        <br>

                                        <div class="row">


                                        </div>



                                        <br>

                                        <br>

                                        <br>

                                        <div class="form-group text-center">

                                            <button type="reset" class="btn btn-gris font-15" style="border-radius: 5px">
                                                <strong>Cancelar</strong>
                                            </button>



                                            <button type="submit" class="btn btn-verde  font-15" value="validate"   style= "border-radius: 5px">
                                                <strong>Registrar</strong>
                                            </button>

                                        </div>

                                    </div>

                            </form>

                        </div>

                        </div> <!-- end card-box -->
                    </div>
                    <!-- end col -->

                </div>
                <!-- end row -->

            </div> <!-- container -->

        </div> <!-- content -->

        <footer class="footer text-right">
            2018 © Sanoha LTDA.
        </footer>

    </div>


    <!-- ============================================================== -->
    <!-- End Right content here -->
    <!-- ============================================================== -->


</div>
<!-- END wrapper -->


<!-- IMPORT -->
<?php include ("Pages/Includes/Includes-Footer.php");?>


</body>
</html>
    
asked by CristianLRS1997 05.06.2018 в 16:45
source

2 answers

4

You could do it with jQuery by grabbing the event keydown in the input , select and textarea . For example: 

$("body").on("keydown", "input, select, textarea", function(e) {
  var self = $(this),
    form = self.parents("form:eq(0)"),
    focusable,
    next;
  
  // si presiono el enter
  if (e.keyCode == 13) {
    // busco el siguiente elemento
    focusable = form.find("input,a,select,button,textarea").filter(":visible");
    next = focusable.eq(focusable.index(this) + 1);
    
    // si existe siguiente elemento, hago foco
    if (next.length) {
      next.focus();
    } else {
      // si no existe otro elemento, hago submit
      // esto lo podrías quitar pero creo que puede
      // ser bastante útil
      form.submit();
    }
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="#">
  <input type="text" />
  <input type="text" />
  <select>
    <option>valor 1</option>
    <option>valor 2</option>
  </select>
</form>

The html is a basic example so you can test it but it should work with what you put.

    
answered by 05.06.2018 / 16:59
source
2

Place this little JavaScript at the end of your HTML. What it does is that it looks for all the elements of type input and adds an event handler that when it detects that enter was pressed, it looks for the next input and it focuses it. Here is the implementation: 

function tab(e) {
  if (e.which == 13) {
    var nextSibling = e.target.nextSibling.nextSibling
    if (nextSibling) {
      nextSibling.focus();
    }
    /* INICIO EDICION*/
    else {
      inputs[0].focus();
    }
    /*FIN EDICION*/
    e.preventDefault();
  }
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++) {
  inputs[x].addEventListener('keypress', tab);
}
<form>
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</form>

EDIT Added a bit of extra functionality (for not making another answer just for that, this is fine): when you're in the last input , go back to the first one by pressing enter .

    
answered by 05.06.2018 в 17:32
change color of placeholder="Second Name" Problem tildes and special characters java