如何在每次单击时创建文本框

时间:2017-10-05 20:30:42

标签: javascript twitter-bootstrap electron-packager

我需要创建一个空表单并使用按钮添加任意数量的文本框。每次单击创建一个文本框。我使用Electron框架。有人会有想法吗?

3 个答案:

答案 0 :(得分:0)

您可以轻松地向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());
});

答案 1 :(得分:0)

感谢所有的评论,我终于这样做,它有效

// 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
}

答案 2 :(得分:-1)

你应该在javascript中完成它。你可以使用像Jquery这样的库来做到这一点。我会在这里注明代码,但如果您有问题,请展示您的工作,我们很乐意帮助您调试代码。

有很多方法可以做到。

一种方法: 你创建一个按钮。您在其上添加一个事件侦听器(侦听click事件)。然后你给该事件监听器一个函数。此函数负责添加文本框。您可以查看jquery的append函数来执行此操作。或实施自己的。

希望这对你有帮助,如果不清楚则发表评论,我会补充更多解释。