克隆后的实时填充输入

realtime filling inputs after clon

本文关键字:填充 输入 实时      更新时间:2023-09-26

我正在学习JS,但一直在学习。http://jsfiddle.net/h7vgxewL/我想要实现的是能够更改克隆输入中的值。问题就在这里:

document.getElementById("control-II-Art-list-line1").onkeyup = function() {
        document.getElementById("display-II-Art-list-line1").innerHTML = this.value;   
        }

如果我添加更多的字段,我需要为新行复制这些字段,比如行和输入字段,id为:

control-II-Art-list-line2

有没有办法做到这一点?请检查一下小提琴,我想你会明白我的意思的。谢谢你的建议。

使用jQuery和事件委派将是微不足道的。委托的事件侦听器适用于将来添加的元素:

$('form').on('keyup', 'input', function(){
    $('#' + this.id.replace("control-", "display-")).html( this.value );
});

http://jsfiddle.net/h7vgxewL/3/

或者,在香草JS:

document.forms[0].addEventListener('keyup', function(e){
   var targetid, targetElement;
   if(e.target.id){
        targetid = e.target.id.replace("control-", "display-");
        targetElement = document.getElementById( targetid );
        if( targetElement ){
            targetElement.innerHTML = e.target.value;
        } 
  }
});

http://jsfiddle.net/dd0w7skz/