Issue
I'm working on a form and am trying to create an onkeydown function that does the following:
- Only fires when the tab key is pressed (got this working ok)
- Inserts a new element (
input) (got this working ok) - Then the inserted
inputcalls the sameonkeydownfunction (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:
- attach an event handler with addEventListener
- start your code on DOMContentLoaded
- use input autofocus attribute
- use appendChild to insert a newly created element to DOM
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>Answered By - gaetanoM
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.