Question

我在一个应用程序中工作，我有三个动态文件框，一个是输入值，第二个是一次，第三个也是一个时间，第二个和第三个框都有timepicker api。所以现在我需要的是我会在文本框中键入内容并从这两个时间选择框中选择时间，并且值将附加在它们顶部的相应文本框上。就像我给了一个小提琴，我已经实现了我已达到的情况所以远，这是DEMO

所以我会在textbox1上写一些东西，它会在它上面的文本框上显示，我也会从第二个盒子和第三个盒子中选择一个时间，这将在第二个和第三个盒子上我试图使用按键和mousedown，但这不适用于文本框的动态填充，就像我尝试使用

$('#TextBoxContainer').on('keypress', 'input', function () {

});

但这并没有给出文本框的价值。有人请帮忙

Answer 1

如果您想要动态创建3个输入框，其值为text1 text2，text3 here就是结果。

这就是我所改变的：

...
$("#btnAdd").bind("click", function () {
    var a = $("#text1");
    var b = $("#text2");
    var c = $("#text3");
    var div = $("div");
    div.html(GetDynamicTextBox(a, b , c));
...

显然在GetDynamicTextBox()函数中，我使用期望值（来自a，b和c）填充InputBoxes。

如果您想要使用生成的输入框this的值更新text1 text2和text3，请执行以下操作：

这是相关代码我已经改变了这个：

$('.txt1').bind('keyup',function(e){
    var code = e.which; 
    if(code==13)e.preventDefault();
    if(code==32||code==13||code==188||code==186){
      $('#text1').val($('#text1').val()+', '+$(this).val());
    }
});

要使上述解决方案正常工作，您必须在更改每个输入框后按Enter键。

如果你不想按下输入here，你就会得到一个解决方案，当生成的输入框失去焦点时，该解决方案有效。

这是相关代码：

   $('.txt1').bind('focusout',function(){  
          $('#text1').val($('#text1').val()+', '+$(this).val());
    });

您可能想要检查新值是否与旧值相同。

PS：我在这里显示的是第一个输入框的片段，因为其余部分几乎是相同的。 complet解决方案在jsfiddle中。

Answer 2

试试这段代码。

注意：我使用<input id="text1" type="text" value="" /> <input id="text2" type="text" value="" /> <input id="text3" type="text" value="" /> <div id="TextBoxContainer"> <input id="btnAdd" type="button" value="Add" /> </div>分隔不同文本框中的值。

Demo

HTML

$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);    
        $(".time").timepicker();
        $('.txt1,.txt2,.txt3').change(function () {
            UpdateData()
     });
});
$("#btnGet").bind("click", function () {
    var valuesarr = new Array();
    var phonearr = new Array();
    var phonearr1 = new Array();
    $("input[name=DynamicTextBox]").each(function () {
        valuesarr.push($(this).val());
        $('#DynamicTextBox').val(valuesarr);
    });
    $("input[name=phoneNum]").each(function () {
        phonearr.push($(this).val());
        $('#phoneNum').val(phonearr);
    });

    $("input[name=phoneNum1]").each(function () {
        phonearr1.push($(this).val());
        $('#phoneNum1').val(phonearr1);
    });

    alert(valuesarr);
    alert(phonearr);
    alert(phonearr1);
});

$("body").on("click", ".remove", function () {
    $(this).closest("div").remove();
});

});

function GetDynamicTextBox(value) {
return '<input class="txt1" name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;<input class="txt2 time" id="myPicker" class="time" type="text" />&nbsp;<input name = "phoneNum1" id="phoneNum1" class="time txt3"  type="text" /><input  type="button" value="Remove" class="remove" />';
}

function UpdateData() {
    var text1 = ''
    $('#TextBoxContainer').find('.txt1').each(function (index, Obj) {
        if ($(Obj).val()) text1 += $(Obj).val() + ','
    })

    $('#text1').val(text1)
    var text2 = ''
    $('#TextBoxContainer').find('.txt2').each(function (index, Obj) {
        if ($(Obj).val()) text2 += $(Obj).val() + ','
    })
    $('#text2').val(text2)
    var text3 = ''
    $('#TextBoxContainer').find('.txt3').each(function (index, Obj) {
        if ($(Obj).val()) text3 += $(Obj).val() + ','
    })
    $('#text3').val(text3)
}

JS

{{1}}

Answer 3

如果我理解正确，您就不需要处理keypress和mousedown事件。

您只需要处理onsubmit的{{1}}事件。只需阅读form，textbox，DateTimeBox中的值，然后将其粘贴到新创建的DateTimeBox，textbox2，DateTimeBox21。

如何在动态创建的文本框中应用keypress和mousedown事件

3 个答案: