Question

我尝试在文本字段中输入一些文本时动态创建文本字段。起初它在每次击键后创建了新的文本字段，但我试图将其缩小，以便每个文本字段创建一个文本字段。

用一个简短的例子来解释一下，我想得到的是，在开始时我有文本字段A.如果在文本字段A中输入了某些内容，则在文本字段A下创建文本字段B.如果在文本字段B中键入了某些内容，则显示文本字段C在文本字段B下创建，依此类推，直到用户将最后一个留空。

错误的是，动态创建的元素没有选择activeElement。我的想法是，当另一个文本字段被选中时，它将成为（应该已成为）一个长度为零的activeElement，从而将createNew更改为true并允许它创建新的文本字段。

我希望我能清楚地解释我想要达到的目标，但英语不是我的母语，所以它有点困难。我可能会以一个糟糕的视角来处理这个问题，所以如果有人更好地了解如何动态创建文本字段，我可以选择不同的选项。我以前做了一些谷歌搜索，并没有找到很多关于这个特定想法。

无论如何，这是我的js。

//This is the javascript for the namepage.html
var createNew = true;

function getNewInsertion() {
    var container = document.getElementById("inputcontainer");

    if (document.activeElement.value.length == 0 && createNew == false){
        createNew = true;
    }
    else if (createNew == true){
        createNew = false;
        var input = document.createElement("input");
        input.type = "text";
        input.className = "form-control text-controller"; // set the CSS class
        input.placeholder = "Sisesta siia nimi";
        container.appendChild(input);
    }

    return createNew;
}



$(function() {
    $(".text-controller").bind("paste cut keydown",function(e) {
        getNewInsertion();

    })

});

Answer 1

您应该在容器上delegate the event：

$(function() {
    $("#inputcontainer").on( "paste cut keydown", "input", function(e) {
        getNewInsertion();
    })
});

我给你留下一个片段：

var createNew = true;

function getNewInsertion() {
    var container = document.getElementById("inputcontainer");

  if (document.activeElement.value.length == 0 && createNew == false){
        createNew = true;
    }
    else if (createNew == true){
        createNew = false;
        var input = document.createElement("input");
        input.type = "text";
        input.className = "form-control text-controller"; // set the CSS class
        input.placeholder = "Sisesta siia nimi";
        container.appendChild(input);
    }

    return createNew;
}

$(function() {
    $("#inputcontainer").on( "paste cut keydown", "input", function(e) {
        getNewInsertion();
    })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputcontainer">
  <input type="text" class="text-controller" />
</div>

Javascript activeElement doesen适用于动态创建的文本字段

1 个答案: