如何动态创建<input type =“ text” />

Answers:

154

使用JavaScript：

var input = document.createElement("input");
input.type = "text";
input.className = "css-class-name"; // set the CSS class
container.appendChild(input); // put it into the DOM
— 扎克
source
对不起，但是我无法在表格上显示它吗？我已经创建了一个功能，当单击添加按钮时会触发该功能。但是我无法弄清楚如何从用户输入的文本字段中获取文本。。？如果我还想为这些动态创建的文本字段分配一个CSS类，该怎么办？。？
— Mohammad Usman
我向示例添加了一些代码，以显示将其附加到DOM并将CSS类添加到动态创建的元素。
— Zach
25

使用Javascript，您所需要做的就是document.createElement和setAttribute。

var input = document.createElement("input");
input.setAttribute('type', 'text');

然后，您可以使用appendChild将创建的元素追加到所需的父元素。

var parent = document.getElementById("parentDiv");
parent.appendChild(input);
— 亚历克斯·乔利格
source
3

也许方法document.createElement();就是您要寻找的。

— lia
source
3

创建用户给定的输入字段数

  1. 从用户那里获取文本字段的数量，并将其分配给变量。

    var no = document.getElementById("idname").value

  1. 要创建输入字段，请使用createElementmethod并指定元素名称（即“ input”）作为如下所示的参数并将其分配给变量。

    var textfield = document.createElement("input");

  1. 然后为变量分配必要的属性。

    textfield.type = "text";

    textfield.value = "";

  1. 最后，使用appendChildmethod将变量追加到form元素。这样，输入元素将在form元素本身中创建。

    document.getElementById('form').appendChild(textfield);

  1. 循环执行2、3和4步骤，以在表单元素内创建所需数量的用户指定的输入元素。

    for(var i=0;i<no;i++) {           
    var textfield = document.createElement("input");
    textfield.type = "text"; textfield.value = "";
    document.getElementById('form').appendChild(textfield);
}

这是完整的代码

function fun() {
    /*Getting the number of text fields*/
    var no = document.getElementById("idname").value;
    /*Generating text fields dynamically in the same form itself*/
    for(var i=0;i<no;i++) {
        var textfield = document.createElement("input");
        textfield.type = "text";
        textfield.value = "";
        document.getElementById('form').appendChild(textfield);
    }
}
<form id="form">
    <input type="type" id="idname" oninput="fun()" value="">
</form>
展开摘要

— 阿吉斯拉杰
source
2

您可以根据输入的文本字段的数量在循环中执行类似的操作。

$('<input/>').attr({type:'text',name:'text'+i}).appendTo('#myform');

但是为了获得更好的性能，我会先创建所有html并将其仅注入DOM一次。

var count = 20;
var html = [];
while(count--) {
  html.push("<input type='text' name='name", count, "'>");
}
$('#myform').append(html.join(''));

编辑此示例使用jQuery附加html，但是您也可以轻松修改它以使用innerHTML。

— 丹尼尔姆
source
7
最好提及这取决于jQuery，因为问题未指定jQuery。
— 杰夫，
2

您可以使用createElement()创建文本框的方法

— 肖恩
source
2

我认为以下链接将为您提供帮助。如果要动态生成字段，并且还希望同时删除它们，则可以从此处获取帮助。我有同样的问题，所以我得到了答案

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').live('click', function() { 
                if( i > 2  ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

http://jsfiddle.net/jaredwilli/tZPg4/4/

— 用户名
source
此代码的删除部分是不完善的。如果添加2个输入并删除中间的一个，则最终得到2个具有相同ID的输入。更好地删除带有的行。i--;如果将其放入由PHP处理的表单中，则还必须分别处理原始输入字段和其他输入字段。
— jaaq
1

您可以使用ES6退出 

  var inputs = [
        `<input type='checkbox' id='chbox0' onclick='checkboxChecked(this);'> <input  type='text' class='noteinputs0'id='note` + 0 + `' placeholder='task0'><button  id='notebtn0'                     >creat</button>`, `<input type='text' class='noteinputs' id='note` + 1 + `' placeholder='task1'><button  class='notebuttons' id='notebtn1' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 2 + `' placeholder='task2'><button  class='notebuttons' id='notebtn2' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 3 + `' placeholder='task3'><button  class='notebuttons' id='notebtn3' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 4 + `' placeholder='task4'><button  class='notebuttons' id='notebtn4' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 5 + `' placeholder='task5'><button  class='notebuttons' id='notebtn5' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 6 + `' placeholder='task6'><button  class='notebuttons' id='notebtn6' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 7 + `' placeholder='task7'><button  class='notebuttons' id='notebtn7' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 8 + `' placeholder='task8'><button  class='notebuttons' id='notebtn8' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 9 + `' placeholder='task9'><button  class='notebuttons' id='notebtn9' >creat</button>`
    ].sort().join(" ");
   document.querySelector('#hi').innerHTML += `<br>` +inputs;
<div id="hi"></div>
展开摘要

— 奥马尔·巴赫什（Omar Bakhsh）
source
0

该解决方案的核心思想是：

  • 创建一个新的 input元素
  • 添加类型 text
  • 将元素附加到DOM

这可以通过以下简单脚本完成：

var input = document.createElement('input');
input.setAttribute('type', 'text');
document.getElementById('parent').appendChild(input);

现在的问题是，如何使该过程动态化。如问题中所述，在用户输入要生成的输入数量的地方还有另一个输入。可以按照以下步骤进行：

function renderInputs(el){
  var n = el.value && parseInt(el.value, 10);
  if(isNaN(n)){
    return;
  }
  
  var input;
  var parent = document.getElementById("parent");
  
  cleanDiv(parent);
  for(var i=0; i<n; i++){
    input = document.createElement('input');
    input.setAttribute('type', 'text');
    parent.appendChild(input);
  }
}

function cleanDiv(div){
  div.innerHTML = '';
}
Insert number of input to generate: </br>
<input type="text" onchange="renderInputs(this)"/>

<div id="parent">
Generated inputs:
</div>
展开摘要

但是通常仅添加输入并不是真正有用的，最好在输入中添加名称，以便可以将其轻松发送为表单。此代码段还添加了一个名称：

function renderInputs(el){
  var n = el.value;
  var input, label;
  var parent = document.getElementById("parent");
  cleanDiv(parent);
  
  el.value.split(',').forEach(function(name){
    input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('name', name);
    label = document.createElement('label');
    label.setAttribute('for', name);
    label.innerText = name;
    parent.appendChild(label);
    parent.appendChild(input);
    parent.appendChild(document.createElement('br'));
  });
}

function cleanDiv(div){
  div.innerHTML = '';
}
Insert the names, separated by comma, of the inputs to generate: </br>
<input type="text" onchange="renderInputs(this)"/>
<br>
Generated inputs: </br>
<div id="parent">

</div>
展开摘要

— 格里多
source
0

  • 查询并获取容器DOM元素

  • 创建新元素

  • 将新元素放入文档树

//Query some Dib region you Created
let container=document.querySelector("#CalculationInfo .row .t-Form-itemWrapper");
let input = document.createElement("input");

//create new Element  for apex
input.setAttribute("type","text");
input.setAttribute("size","30");
containter.appendChild(input); // put it into the DOM
— 摩at的心
source
@murb您也可以贡献力量
— Bhargav Nanekalva
0 
<button id="add" onclick="add()">Add Element</button>

<div id="hostI"></div>

<template id="templateInput">
    <input type="text">
</template>

<script>
    function add() {

        // Using Template, element is created
        var templateInput = document.querySelector('#templateInput');
        var clone = document.importNode(templateInput.content, true);

        // The Element is added to document
        var hostI = document.querySelector('#hostI');
        hostI.appendChild(clone);
    }

</script>

现在推荐使用HTML模板来生成动态内容。

— 阿涅尔·维沙尔（Agnel Vishal）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.