Tworzenie nowego elementu po naciśnięciu klaiwszu Tab

Question

Cześć!

Tworzę stronę na której są trzy elementy <div class="els"></div> z inputami. Chcę uzyskać efekt taki, że kiedy użytkownik uzupełnia te elementy, przeskakując do następnych tabulatorem, to w momencie kiedy użytkownik jest na ostatnim elemencie i wciska Tab tworzy się nowy element z inputem, który od razu otrzymuje focus. 
Niżej zamieszczam kod HTML i JS. 
Bardzo proszę o jakieś pomysły jak to dobrze rozwiązać 

Z góry dziękuję za każdą wskazówkę.

var colors = ["#00bfff","#0080ff","#8533ff","#0080ff"];
var parel = document.getElementById("elements");

for (i = 0; i < 3; i++) {
    elem = "<div class=els id=n"+(i+1)+" style=background:"+colors[i]+"><div class=number>"+(i+1)+"</div><input type=text class=things><div class=clear></div></div>";
    parel.innerHTML += elem;
}

var allInputs = document.getElementsByClassName("things");
var inputsNumber = allInputs.length;
var y = allInputs[inputsNumber-1].addEventListener("blur", add);

function add(){
    var x = document.addEventListener("keyup", function(event) {
        if (event.keyCode === 9) {
            //var allInputs = document.getElementsByClassName("things");
            //var inputsNumber = allInputs.length;
            //console.log(inputsNumber-1);
            //if (document.activeElement==allInputs[inputsNumber-1]) add();
            var parent = document.getElementById("elements");
            var howmany = parent.childElementCount;
            var input = "<div class=els id=n"+(howmany+1)+" style=background:"+colors[howmany-1]+"><div class=number>"+(howmany+1)+"</div><input type=text class=things><div class=clear></div></div>";
            parent.innerHTML += input;
        }
      });
}

<div id="elements"></div>

PS. Dodaję JSbina bo na JSfiddle nie działa
https://jsbin.com/xafuduqare/edit?html,js,output

Answer 1

Ja bym na szybko zrobił tak.
1. Pod ostatni element podpinam event focus.
2. W jego callbacu (czyli kiedy nastąpi focus na ostatni element) tworzony jest nowy element i jest on dodawany, ale dajemy mu jakie opacity czy coś(jest ogólnie niewidoczny) i podpinamy mu znów event focus
3. Kiedy user klika tab przełącza się na niewidoczny element a w jego wykonaniu element sie pojawia, i robimy to samo w punkcie drugi i mamy nieskończoną pętle 
Podaje przykładowy kod (nie bd rb to do twojego, bo jest on do poprawy może coś z tego wyciągniesz)

 

const container = document.querySelector('.container');

const lastInput = document.querySelectorAll("input")[0];

const addNewLastInput = () => {
    const newLastLabel = document.createElement('label');
    newLastLabel.for = 'something-id';

    const newLastInput = document.createElement('input');
    newLastInput.classList.add('something-class');
    newLastInput.id = 'something-id';
    newLastInput.name = 'something-name';
    
    
    return {
        input: newLastInput,
        label: newLastLabel
    };
};

addNewLastInputEvent = () => {
    const inputDiv = document.createElement('div');
    
    const elements = addNewLastInput();
    inputDiv.appendChild(elements.label);
    inputDiv.appendChild(elements.input);
    
    container.appendChild(inputDiv);
    
    elements.input.removeEventListener('focus', addNewLastInputEvent);
    lastInput.removeEventListener('focus', addNewLastInputEvent);
};

lastInput.addEventListener('focus', addNewLastInputEvent);

PS. robione na kolanie można zrb to milion razy lepiej. Na początek wymyśl jak wyeliminować całkowicie zmienną lastInput, powodzenia

Comments

musisz jeszcze odpowiednio zmodyfikować klasy i dodać coś związane z ukrywaniem, ale sama mechanika powinna być chyba okej ;)