如何添加动态id文本框和获取其值?

Question

我试图获取每个文本框keyup事件内循环的值。在创建一系列文本框之后，我想调用keyup事件，它获取每个文本框中输入的值

what I have try

script for assigning dynamic id
<textarea type="text" name="add'+ $i +'" id="add'+ $i +'"
value="" class="form-control" onkeyup="callans()" ></textarea> <br/>
function callans() {
for( var i=0; i<8; i++) 
//i<9 because that's the maximum number of text 
//fields to be created is 8.     
{        


<textarea type="text" name="add'+ $i +'" id="add'+ $i +'"
value="" class="form-control" onkeyup="callans()" ></textarea> 
var elements = document.getElementById("add'+ $i +'").value;
alert(elements); 

}
}

是否有一种方法只能动态创建id并将其附加在输入区域?

Answer 1

不使用ID属性，您可以很容易地通过检查event来识别DOM中的元素-在您的情况下，您对keyup事件感兴趣，并且通过使用绑定到输入元素的共同父元素的delegated event listener来简化生活，我们可以获得如下值:

(主要是香草js)

for( var i=0; i<8; i++){        
$('#addition').append('<input class="form-control" type="text" name="add" />');
}
// delegated event listener bound to the parent container but processing only `INPUT` elements of type `text`
document.querySelector('#addition').addEventListener('keyup',function(e){
if( e.target.tagName=='INPUT' && e.target.type=='text' ){
console.log(e.target.value)
}
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='addition'></div>