Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="multi-inputs" data-multi-inputs-min="1" data-multi-inputs-max="3"> <div class="multi-input">Jméno: <input name="jmeno[]"></div> </div> <hr> <table class="multi-inputs" data-multi-inputs-min="2" data-multi-inputs-max="4"> <tr class="multi-input"><td>Jméno:</td><td><input name="jmeno[]" value="Honza"></td></tr> <tr class="multi-input"><td>Jméno:</td><td><input name="jmeno[]" value="Pepa"></td></tr> </table> <hr> <table class="multi-inputs" data-multi-inputs-min="1" data-multi-inputs-max="2"> <tr class="multi-input"><td>Jméno:</td><td><input name="jmeno[]" value="Honza"></td></tr> <tr class="multi-input"><td>Jméno:</td><td><input name="jmeno[]" value="Pepa"></td></tr> </table>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
function multiInputs(container) { var min = Math.max(container.getAttribute('data-multi-inputs-min') || 1, 1); var max = Math.max(min, container.getAttribute('data-multi-inputs-max') || Infinity); var multiInputs = container.querySelectorAll('.multi-input'); if (multiInputs.length == 0) { alert("There must be at least one multi-input"); return; } function registerInput(multiInput) { var input = multiInput.querySelector('input'); var previous = null; input.onchange = input.onkeyup = function() { var emptyThis = input.value == ''; if (previous == emptyThis) { return; } previous = emptyThis; var multiInputs = container.querySelectorAll('.multi-input'); var count = multiInputs.length; var emptyCount = 0; for (var i = 0; i < multiInputs.length; i++) { emptyCount += multiInputs[i].querySelector('input').value == ''; } if (emptyThis && emptyCount > 1 && count > min) { multiInput.parentNode.removeChild(multiInput); } if (!emptyThis && emptyCount == 0 && count < max) { addInput(multiInput); } }; return input.value == ''; } function addInput(multiInput) { var clone = multiInput.cloneNode(true); multiInput.parentNode.insertBefore(clone, multiInput.nextSibling); registerInput(clone); var input = clone.querySelector('input'); input.value = ''; } var i, empty = 0; for (i = 0; i < multiInputs.length; i++) { empty += registerInput(multiInputs[i]); } var total = Math.max(empty > 0 ? 0 : Math.min(multiInputs.length + 1, max), min); for (i = multiInputs.length; i < total; i++) { addInput(multiInputs[multiInputs.length-1]); } } var mi = document.querySelectorAll('.multi-inputs'); for (var i = 0; i < mi.length; i++) { multiInputs(mi[i]); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>