我怎样才能在每次点击时创建一个文本框
How can i create a text box at each click
我需要创建一个空表单并使用按钮添加任意数量的文本框。每次点击创建一个文本框。我使用电子框架。有人有想法吗?
你应该在 javascript 完成。您可以使用像 Jquery 这样的库来做到这一点。我会在这里注明代码,但如果您遇到问题,请展示您的工作,我们很乐意帮助您调试代码。
有很多方法可以做到。
一种方法:
您创建一个按钮。您在其上添加一个事件监听器(监听点击事件)。然后你给那个事件监听器一个函数。此函数负责添加文本框。您可以查看 jquery 的附加函数来执行此操作。或者实现你自己的。
希望对你有帮助,有不明白的可以评论,我会补充说明。
您可以轻松地向 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());
});
感谢大家的评论,我终于这样做了,成功了
// 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
}
我需要创建一个空表单并使用按钮添加任意数量的文本框。每次点击创建一个文本框。我使用电子框架。有人有想法吗?
你应该在 javascript 完成。您可以使用像 Jquery 这样的库来做到这一点。我会在这里注明代码,但如果您遇到问题,请展示您的工作,我们很乐意帮助您调试代码。
有很多方法可以做到。
一种方法: 您创建一个按钮。您在其上添加一个事件监听器(监听点击事件)。然后你给那个事件监听器一个函数。此函数负责添加文本框。您可以查看 jquery 的附加函数来执行此操作。或者实现你自己的。
希望对你有帮助,有不明白的可以评论,我会补充说明。
您可以轻松地向 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());
});
感谢大家的评论,我终于这样做了,成功了
// 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
}