我如何在每次點擊時創建一個文本框

Question

我需要創建一個空表單並使用按鈕來添加儘可能多的文本框。每次點擊創建一個文本框。我使用Electron框架。會有人有想法嗎？

Answer 1

你應該用javascript來做。你可以使用像Jquery這樣的庫來做到這一點。我會注意到在這裏給出代碼，但是如果你有問題，展示你的工作，它將很高興幫助你調試你的代碼。

有很多方法可以做到這一點。

一種方法： 您創建一個按鈕。你添加一個事件監聽器（監聽點擊事件）。然後你給這個事件監聽器一個函數。這個函數負責添加文本框。你可以看看jQuery的附加功能來做到這一點。或者實施你自己的。

希望這對你有所幫助，如有不明之處請留言，我會加入更多解釋。

Answer 2

您可以輕鬆地元素添加到DOM：

function createTextBox() { 
    var input = document.createElement('input'); 
    input.type = 'text'; 
    return input; 
} 

var form = document.getElementById('myForm'); 
document.getElementById('addText').addEventListener('click', function(e) { 
    form.appendChild(createTextBox()); 
}); 

Answer 3

感謝所有您的意見，我終於像這樣做，它的工作原理

// fcontion pour créer un label 
function createLabel ($for, $texte) { 
    var label = document.createElement('label'); 
    label.setAttribute('for', $for); 
    var texte = document.createTextNode('Légende'); 
    label.appendChild(texte); 
    return label; 
} 

// fonction pour une zone de texte 
function createInput ($type, $classe, $id) { 
    var input = document.createElement('input'); 
    input.setAttribute('type', $type); 
    input.setAttribute('class', $classe); 
    input.setAttribute('id', $id); 
    return input; 
} 

// Générer une zone de texte 
function createTextBox() { 
    var div = document.createElement('div'); 
    div.setAttribute('class', 'form-group'); 
    div.appendChild(createLabel('legende', 'Légende')); 
    div.appendChild(createInput('text', 'form-control', 'legende')); 

    var form = document.getElementById('myForm'); 
    form.appendChild(div); 
    document.getElementById('closeModal').click(); // fermer le popup 
}