I looked through some related questions, but none helped me figure out my problem.
I have my own dynamic data grid form built from scratch, where rows of data and field columns can be added/removed etc. I'm trying to improve the usability so that pressing the enter key will create a new field column and give focus to it. Here's the code that does this so far:
$('#data_fields').on('keydown','._field',function(e){
if(e.which==13)
{
$('#addfield').click();
var o=$(this).parent().parent();
var l=$(o).children().length-2;
var f=$(o).find("td:eq("+l+")").find("._field");
$(f).focus();
}
});
#addfield
is a button which adds the field column when clicked.
._field
is an input box where the name of the field is written.
#data_fields
is a tr containing cells with ._field
input boxes in them.
However, the ._field
input boxes in the new columns do not have the special superelement keydown ability. Whats more, if I change the ('#data_fields')
selector for .on()
to (document)
, it doesn't even give current elements the keydown callback.
Here's the HTML, sorry that its a bit messy but I use templates in PHP and stuff:
<thead id="doc_fields">
<tr id="delrow">
<tr id="data_fields">
<td style="padding:2px"><input class="_field" type="text" onkeyup="sync_doc_table();" onchange="sync_doc_table();" style="width:90%" value="" name="Fields[]"></td>
<td style="padding:2px"><input class="_field" type="text" onkeyup="sync_doc_table();" onchange="sync_doc_table();" style="width:90%" value="b" name="Fields[]"></td>
<td style="padding:2px"><input type="text" style="width:90%" value="" name="Fields[]" onchange="sync_doc_table();"></td>
<td style="padding:2px"><input type="text" style="width:90%" value="" name="Fields[]" onchange="sync_doc_table();"></td>
<td id="addcol" class="midi" style="width:25px" rowspan="3">
<a id="addfield" onclick="inscol('#addcol','<td style=\'padding:2px\'><input onchange=\'sync_doc_table();\' type=\'text\' name=\'Fields[]\' value=\'\' style=\'width:90%\' /></td>');addcol('#typerow','<td><select name=\'Type[]\' style=\'width:91%\'><option value=\'integer\'>integer</option><option value=\'double\'>double</option><option value=\'string\' selected=\'selected\'>string</option></select></td>');addcol('#delrow','<td class=\'center _delly\'><a href=\'#\' onclick=\'del_doc_field($(this).parent());return false;\'><img src=\'/images/icons/x.png\' alt=\'[Del]\' /></a></td>');$('._colsp').attr('colspan', $('#addrow').attr('colspan') + 1);$('<td><input type=\'text\' name=\'Data[][]\' value=\'\' style=\'width:90%\' /></td>').insertBefore('.datarow ._delly');return false;" href="#">
</td>
</tr>
<tr id="typerow">
</thead>
Keycode 13 is the Enter key.
The keydown() is an inbuilt method in jQuery which is used to trigger the keydown event whenever User presses a key on the keyboard.
The keydown event is fired when a key is pressed. Unlike the deprecated keypress event, the keydown event is fired for all keys, regardless of whether they produce a character value. The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.
jQuery keydown() Method keydown - The key is on its way down. keypress - The key is pressed down. keyup - The key is released.
From What I can tell it's because your input class that's being appended doesn't have a _field
class in it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With