Inspired by the Chrome Postman extension , I want to implement a multi-field form section by automatically adding a new input field when a certain field is navigated to, and give focus to the new field. The below screenshot shows how this works in Postman; the downmost row contains a couple of inputs that, when navigated to, results in a new row being added above it, which can be typed into.
How can I achieve this behaviour in JavaScript/jQuery? To simplify matters, I need only one input field per row. I've created a fiddle that should serve as a starting point for a solution.
Example HTML:
<div id="last-row">
<input name="multifield" placeholder="Value"></input>
</div>
See how I'd do it: http://jsfiddle.net/jCMc8/8/
html:
<section>
<div id="initRow">
<input name="multifield" placeholder="Value">
</div>
</section>
javascript:
function addRow(section, initRow) {
var newRow = initRow.clone().removeAttr('id').addClass('new').insertBefore(initRow),
deleteRow = $('<a class="rowDelete"><img src="http://i.imgur.com/ZSoHl.png"></a>');
newRow
.append(deleteRow)
.on('click', 'a.rowDelete', function() {
removeRow(newRow);
})
.slideDown(300, function() {
$(this)
.find('input').focus();
})
}
function removeRow(newRow) {
newRow
.slideUp(200, function() {
$(this)
.next('div:not(#initRow)')
.find('input').focus()
.end()
.end()
.remove();
});
}
$(function () {
var initRow = $('#initRow'),
section = initRow.parent('section');
initRow.on('focus', 'input', function() {
addRow(section, initRow);
});
});
This is how I would do it.
HTML:
<table>
<tbody>
<tr class="item">
<td><input name="multifield" placeholder="Value" /></td>
<td><i class="icon delete"></i></td>
</tr>
<tr class="item inactive">
<td><input name="multifield" placeholder="Value" /></td>
<td><i class="icon delete"></i></td>
</tr>
</tbody>
</table>
JavaScript:
$("table")
.on("click focus", ".item.inactive", function(e) {
var curRow = $(this);
curRow.clone().appendTo("table tbody");
curRow.removeClass("inactive").find("input:first").focus();
})
.on("click", ".icon.delete", function(e) {
$(this).closest("tr").remove();
});
See test case on jsFiddle .
I have come up with a solution that seems to work so far, but I'm interested in hearing from others as to whether it is a good one. What I do is catch the focus event for the last input field, add a new row and give focus to the input field within that row. See this fiddle for working code.
HTML:
<div id="last-row">
<input name="multifield" placeholder="Value">
</div>
JavaScript:
var lastRow = $('#last-row');
var lastInput = lastRow.find('input');
function addRow() {
var newRow = $('<div><input name="multifield" placeholder="Value"><a class="row-delete"><img src="http://i.imgur.com/ZSoHl.png" /></a></div>');
var newInput = newRow.find('input');
lastRow.before(newRow);
newInput.focus();
var newDelete = newRow.find('a');
newDelete.click(function() {
newRow.remove();
});
}
lastInput.focus(function() {
addRow();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.