Javascript 如何在动态创建的文本框上应用按键和鼠标向下事件

我在一个应用程序中工作，其中有三个文本框被动态极化，一个是输入值，第二个是时间，第三个也是时间，第二个和第三个框中都有时间选择器api。所以现在我需要的是在文本框中键入一些东西，并从这两个时间选择器框中选择时间，值将附加在它们上面的相应文本框上。就像我在我有的地方放了一把小提琴一样实施到目前为止我已经达到的情况，就是这样

所以我会在textbox1上写一些东西，它会显示在它上面的textbox上，我会从第二个框和第三个框中选择一个时间，它会出现在第二个框和第三个框的顶部。我正在尝试使用按键和鼠标向下，但这不会像我尝试使用的那样对文本框的动态填充起作用

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

});

---

但这并没有给出文本框的值。如果我理解正确，请有人帮忙，您不需要处理

按键

和

鼠标向下

事件

---

您只需要处理

表单的
onsubmit
事件。只要从
textbox
，
DateTimeBox
，
DateTimeBox
中读取值，然后将它们粘贴到新创建的
textbox2
，
DateTimeBox21
，
DateTimeBox22
，
DateTimeBox22
，如果我理解正确，就不需要处理
keypress
和
mousedown
事件

您只需要处理
表单的
onsubmit
事件。只需从
textbox
，
DateTimeBox
，
DateTimeBox
读取值，然后将它们粘贴到新创建的
textbox2
，
DateTimeBox21
，
DateTimeBox22
如果您想动态创建3个输入框，其值为
text1
text2
，结果为
text3

这就是我所改变的：

...
$("#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）填充输入框

如果您要使用生成的输入框的值更新
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键

如果您预先选择不按enter键，那么当生成的输入框失去焦点时，您就有了一个解决方案

以下是相关代码：

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

您可能需要检查新值是否与此值中的旧值相同

PS：我在这里展示的只是第一个输入框的片段，因为对于其他输入框来说几乎是一样的。但是，完整的解决方案在JSFIDLE中。
如果您想动态创建3个输入框，其值为
text1
text2
，结果是
text3

这就是我所改变的：

...
$("#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）填充输入框

如果您要使用生成的输入框的值更新
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键

如果您预先选择不按enter键，那么当生成的输入框失去焦点时，您就有了一个解决方案

以下是相关代码：

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

您可能需要检查新值是否与此值中的旧值相同

PS：我在这里展示的只是第一个输入框的片段，因为对于其他输入框来说几乎是一样的。不过，完整的解决方案在JSFIDLE中。
试试这段代码

注意：我使用
逗号
将不同文本框中的值分隔开


HTML



JS

$（函数（）{
$（“#btnAdd”）.bind（“单击”，函数（）{
var div=$（“”）；
div.html（GetDynamicTextBox（“”）；
$（“#TextBoxContainer”）.append（div）；
$（“.time”）.timepicker（）；
$（'.txt1、.txt2、.txt3'）。更改（函数（）{
更新数据（）
});
});
$（“#btnGet”）.bind（“单击”，函数（）{
var valuesarr=新数组（）；
var phonearr=新数组（）；
var phonearr1=新数组（）；
$（“输入[name=DynamicTextBox]”）。每个（函数（）{
valuesarr.push（$（this.val（））；
$（#DynamicTextBox'）.val（valuesarr）；
});
$（“输入[name=phoneNum]”）。每个（函数（）{
phonearr.push（$（this.val（））；
$（'phoneNum'）.val（phonearr）；
});
$（“输入[name=phoneNum1]”）。每个（函数（）{
phonearr1.push（$（this.val（））；
$（'#phoneNum1'）.val（phonearr1）；
});
警报（估价师）；
警报（phonearr）；
警报（电话arr1）；
});
$（“正文”）。在（“单击”，“删除”，函数（）{
$（this）.closest（“div”）.remove（）；
});
});
函数GetDynamicTextBox（值）{
返回“”；
}
函数UpdateData（）{
变量text1=''
$（'#TextBoxContainer'）。查找（'.txt1'）。每个（函数（索引，Obj）{
如果（$（Obj.val（））text1+=$（Obj.val（）+'），'
})
$（'#text1'）.val（text1）
变量text2=''
$（'#TextBoxContainer'）。查找（'.txt2'）。每个（函数（索引，Obj）{
如果（$（Obj.val（））text2+=$（Obj.val（）+'），'
})
$（'#text2'）.val（text2）
变量text3=''
$（'#TextBoxContainer'）。查找（'.txt3'）。每个（函数（索引，Obj）{
如果（$（Obj.val（））text3+=$（Obj.val（）+'），'
})
$（'#text3'）.val（text3）
}
试试这段代码

注意：我使用
逗号
将不同文本框中的值分隔开


HTML



JS

$（函数（）{
$（“#btnAdd”）.bind（“cl