user3464091 user3464091 - 4 months ago 15
HTML Question

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>

Answer

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>

Comments