如何用document.createElement(“input”）方法使输入文本字段动态扩展

How to make input text field dynamic expending with document.createElement("input") method?

本文关键字：输入 方法 文本 字段 扩展 动态 document 何用 createElement input      更新时间：2023-09-26

这是我对这个很棒的社区的第一个问题。

我正在使用这个javascript代码来构建一个动态表：

    function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name = "chkbox[]";
        cell1.appendChild(element1);
        var cell2 = row.insertCell(1);          
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "txtbox[]";
        element2.onkeypress = "this.style.width = ((this.value.length + 1) * 8) + 'px'";
        cell2.appendChild(element2);

    }

和下面的html代码打印它：

       <table id="dataTable" style="width: 300px;" border="0">
            <tr>
                <td ><input type="checkbox" name="chk"  /></td>
                <td  <input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"> </td>
            </tr>
        </table>

我的问题是-我希望我的文本输入字段是动态扩展的，但由于使用了'document.createElement（"input"）；'在Javascript中，只有第一个文本输入字段动态消耗其余

您可以定义您的扩展函数并在以后重用它，如下所示：

expandTextBox = function (tb) {
    tb.style.width = ((tb.value.length + 1) * 8) + 'px';
}

当你创建元素时：

var element2 = document.createElement("input");
element2.onkeypress = function() { expandTextBox(element2); };

在html:中

<input id="txt" type="text" onkeypress="expandTextBox(this)">

请参阅Fiddle

在javascript中向动态创建的元素添加事件时，必须将事件代码定义为function，而不是字符串！因此，将您的addRow函数修改为：

    ...
    element2.onkeypress = function(){this.style.width = ((this.value.length+1)*8)+'px'};
相关文章：