Javascript: Jump between the different inputs and select them by pressing enter

Question

Javascript: Jump between the different inputs and select them by pressing enter

Navigation

#1 by (1 votes)

0

I have two div, in one I have some inputs and select and in the other I have others. The idea is that you can jump to the next input with just pressing enter, but that can only be done in div2 and regardless of whether they are input or select. This must be done using Javascript or Jquery or both.

#div1,
#div2 {
  float: left;
  width: 280px;
  height: 280px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
  overflow: scroll;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <div id="div1">
    <input type=text value="Input de div1">
    <select value="Hey">
      <option>opcion 1 de div 1</option>
      <option>opcion 2 de div 1</option>
    </select>
  </div>

  <div id="div2">
    <input type=text value="Input de div1">
    <select value="Hey">
      <option>seleccionar opcion</option>
      <option>opcion 1 de div 2</option>
      <option>opcion 2 de div 2</option>
    </select>
    <input type=text value="Otro input para div2">
  </div>

</body>

</html>

javascript jquery html

asked by Kinafune 27.08.2018 в 01:21

source

1 answer

Notice undefined index PHP error Why do not you save my mysql data via php?

score 1 · Answer 1

You can assign a class to the elements and then select the next element of that class.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1,
        #div2 {
            float: left;
            width: 280px;
            height: 280px;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
            overflow: scroll;
        }
    </style>
</head>

<body>

    <div id="div1">
        <input class="miClase" type=text value="Input de div1">
        <select value="Hey" class="miClase">
            <option>opcion 1 de div 1</option>
            <option>opcion 2 de div 1</option>
        </select>
    </div>

    <div id="div2">
        <input type=text value="Input de div1">
        <select value="Hey">
            <option>seleccionar opcion</option>
            <option>opcion 1 de div 2</option>
            <option>opcion 2 de div 2</option>
        </select>
        <input type=text value="Otro input para div2">
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(".miClase").keypress(function (e) {
            if (e.which == 13) {
                var a = e.target.nextElementSibling;
                a.focus();
                console.log(a.innerHTML);
            }
        });
    </script>
</body>

</html>