Search code examples
javascripthtmlfunctionincrementkeycode

Onkeydown JS function to add an input that calls the same function

I'm working on a form and am trying to create an onkeydown function that does the following:

  1. Only fires when the tab key is pressed (got this working ok)
  2. Inserts a new element (input) (got this working ok)
  3. Then the inserted input calls the same onkeydown function (stuck here!)

Tried Increment ++ but not working?

Here's where I'm up to:

<html>
<head>


</head>

<body>
    <form>
        <input type ="text" OnKeydown = "tab(event)" />
        <div id ="insert">

        </div>
    </form>


</body>


<script>
    function tab(event) {
        if (event.keyCode == 9) {
            var ins = '<input  type ="text" OnKeydown = "tab(event)"/>'; 
            document.getElementById("insert").innerHTML=ins;
            ins++;
        }
    };
</script>

</html>
Solution

  • The points of interest are:

    function tab(event) {
  if (event.keyCode == 9) {
    // remove the event listener for the old element
    event.target.removeEventListener('keydown', tab);
    
    
    var ins = document.createElement("input");
    ins.type = "text";
    ins.autofocus = true;
    document.getElementById("insert").appendChild(ins);
    ins.addEventListener('keydown', tab, false);
  }
}

window.addEventListener('DOMContentLoaded', function(e) {
  document.getElementsByTagName("input")[0].addEventListener('keydown', tab, false);
}, false);
    <form>
    <input type ="text"/>
    <div id ="insert">
    </div>
</form>

    In order to add a row of inputs like described in the comment you have to create and append a new row to the table, create 3 cells and for each one add the corresponding input field and set the tab event handler for instance on the last cell.

    To create a new row in a table you can refer to insertRow, while in order to add new cells you can take a look to insertCell

    function tab(event) {
  if (event.keyCode == 9) {
    event.target.removeEventListener('keydown', tab);

    var table = document.getElementById('tbl').getElementsByTagName('tbody')[0];

    var newRow = table.insertRow(table.rows.length);

    var newCell = newRow.insertCell(-1);
    var ins = document.createElement("input");
    ins.type = "number";
    ins.autofocus = true;
    newCell.appendChild(ins);

    newCell = newRow.insertCell(-1);
    ins = document.createElement("input");
    ins.type = "text";
    ins.autofocus = true;
    newCell.appendChild(ins);

    newCell = newRow.insertCell(-1);
    ins = document.createElement("input");
    ins.type = "number";
    ins.autofocus = true;
    newCell.appendChild(ins);

    ins.addEventListener('keydown', tab, false);
    setTimeout(function () {
      ins.focus();
    }, 10);
  }
}

window.addEventListener('DOMContentLoaded', function (e) {
  document.getElementsByTagName("input")[0].addEventListener('keydown', tab, false);
}, false);
    <form>
    <input type="text"/>

    <div id="insert">
        <table id="tbl">
            <thead>
            <tr>
                <th>Number</th>
                <th>Text</th>
                <th>Number</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</form>