使用类更新div和输入（keydown / keyup）

Question

问题

下面的工作演示

我试图获得broadcaster和receiver function()。
broadcaster是当前正在输入的元素，broadcast它的内容为receivers。

经过不断的迭代......我永远无法通过function来使其正常工作 我能让它发挥作用的唯一方法就是硬编码。
唯一的问题是......如果我有14名接收者......我将不得不对所有14名接收者进行硬编码。

我尝试了什么

＆＃13;

＆＃13;

function broadcast(a) {
  let recievers = [...document.getElementsByClassName(a)],
      activeElement = document.activeElement;
  
  activeElement.onkeydown = function () {
    for (var i = 0; i < recievers.length; i++) {
      r = recievers[i]
      if (document.activeElement===r) {
        activeElement = r
      }
      
      if (r.hasAttribute("contenteditable")) {
        r.innerHTML = r.innerHTML
      }
      else {
       r.value = r.innerHTML
      }
    }
	}
}


broadcast("reciever1");
broadcast("reciever2");

＆＃13;

#div1,#div2 {
  position: absolute;
  width: calc(50% - 8px);}
#div2 {
  right: 0;}

.element {
  height: 60px;
  text-align: center;
  font-size: 20px;
  line-height: 60px;
  font-family: sans-serif;
  outline: none;
  background: #F0F2F7;
  margin-bottom: 10px;
  color: #3D4757;
}

.receiver {
  
}

input {
  width: 100%;
  height: 60px;
  font-size: 20px;
  border: none;
  outline: none;
  color: #3D4757;
  background: #F0F2F7;
  text-align: center;
  margin: 0;
  padding: 0;
}
input::-webkit-input-placeholder {
  color: #3D4757;
  opacity: .25;}

＆＃13;

<div id="div1" class="element">
  <div class="reciever1 element" contenteditable>Reciever 1</div>
  <div class="reciever1 element" contenteditable>Reciever 1</div>
  <input type="text" class="reciever1 element" placeholder="Reciever 1 Input" />
</div>
<div id="div2" class="element">
  <div class="reciever2 element" contenteditable>Reciever 2</div>
  <div class="reciever2 element" contenteditable>Reciever 2</div>
  <input type="text" class="reciever2 element" placeholder="Reciever 2 Input" />
</div>

＆＃13;

＆＃13;

＆＃13;

它是如何工作的

＆＃13;

＆＃13;

//This is hardcoded in to try and show what I'm trying to achieve.
//The code here is irrelevant…

div1 = document.getElementById("e1"),
div2 = document.getElementById("e2"),
div3 = document.getElementById("e3"),
div4 = document.getElementById("e4"),
div5 = document.getElementById("e5"),
div6 = document.getElementById("e6");

function broadcast1(a) {
  a.onkeydown = function(event) {
    div2.innerHTML = a.innerHTML
    div3.value = a.innerHTML
  }
  a.onkeyup = function(event) {
    div2.innerHTML = a.innerHTML
    div3.value = a.innerHTML
  }
}

function broadcast2(a) {
  a.onkeydown = function(event) {
    div1.innerHTML = a.innerHTML
    div3.value = a.innerHTML
  }
  a.onkeyup = function(event) {
    div1.innerHTML = a.innerHTML
    div3.value = a.innerHTML
  }
}

function broadcast3(a) {
  a.onkeydown = function(event) {
    div1.innerHTML = a.value
    div2.innerHTML = a.value
  }
  a.onkeyup = function(event) {
    div1.innerHTML = a.value
    div2.innerHTML = a.value
  }
}

function broadcast4(a) {
  a.onkeydown = function(event) {
    div5.innerHTML = a.innerHTML
    div6.value = a.innerHTML
  }
  a.onkeyup = function(event) {
    div5.innerHTML = a.innerHTML
    div6.value = a.innerHTML
  }
}

function broadcast5(a) {
  a.onkeydown = function(event) {
    div4.innerHTML = a.innerHTML
    div6.value = a.innerHTML
  }
  a.onkeyup = function(event) {
    div4.innerHTML = a.innerHTML
    div6.value = a.innerHTML
  }
}

function broadcast6(a) {
  a.onkeydown = function(event) {
    div4.innerHTML = a.value
    div5.innerHTML = a.value
  }
  a.onkeyup = function(event) {
    div4.innerHTML = a.value
    div5.innerHTML = a.value
  }
}



broadcast1( div1 )
broadcast2( div2 )
broadcast3( div3 )
broadcast4( div4 )
broadcast5( div5 )
broadcast6( div6 )

＆＃13;

#div1,#div2 {
  position: absolute;
  width: calc(50% - 8px);}
#div2 {
  right: 0;}

div {
  height: 60px;
  text-align: center;
  font-size: 20px;
  line-height: 60px;
  font-family: sans-serif;
  outline: none;
  background: #F0F2F7;
  margin-bottom: 10px;
  color: #3D4757;
}

.receiver {}

input {
  width: 100%;
  height: 60px;
  font-size: 20px;
  border: none;
  outline: none;
  color: #3D4757;
  background: #F0F2F7;
  text-align: center;
  margin: 0;
  padding: 0;
}
input::-webkit-input-placeholder {
  color: #3D4757;
  opacity: .25;}

＆＃13;

<div id="div1">
  <div id="e1" class="receiver1" contenteditable>Reciever 1</div>
  <div id="e2" class="receiver1" contenteditable>Reciever 1</div>
  <input id="e3" type="text" class="receiver1" placeholder="Reciever 1 Input" />
</div>
<div id="div2">
  <div id="e4" class="receiver2" contenteditable>Reciever 2</div>
  <div id="e5" class="receiver2" contenteditable>Reciever 2</div>
  <input id="e6" type="text" class="receiver2" placeholder="Reciever 2 Input" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你在这附近，但有一些错误：

<强>问题：

1. 当您想要向数组添加事件侦听器时，会出现此问题 对象。
2. 你搞乱了事件。你真正需要的事件是 keyup，而不是keydown，因为此事件无法返回已键入的内容 值。

<强>解决方案：

1. 您可以使用closure来保存该迭代的索引。 否则，由相同的功能范围共享并将给出 你是同一次迭代的价值。创建一个单独的功能 对于每个将保存函数内部的状态。
2. 使用keyup事件。

示例：

function broadcast( className ) {
    var recievers = document.querySelectorAll( '.' + className );

    for ( var i = 0, len = recievers.length; i < len; i++ ) {
        ( function( index ) {
            var elem = recievers[index];

            elem.addEventListener( 'keyup', function () {
                var elemText = ( elem.hasAttribute( 'contenteditable' ) ) ? elem.innerHTML : elem.value;

                for ( var j = 0; j < len; j++ ) {
                    ( function( index2 ) {
                        var toElement = recievers[index2];
                        if ( index2 != index ) {
                            if ( toElement.hasAttribute( 'contenteditable' ) ) {
                                toElement.innerHTML = elemText
                            } else {
                                toElement.value = elemText
                            }
                        }
                    } )( j );
                }
            } )
        } )( i );
    }
}

document.addEventListener( 'DOMContentLoaded', function() {
  broadcast( 'reciever1' );
  broadcast( 'reciever2' )
} )

#div1,
#div2 {
    position: absolute;
    width: calc(50% - 8px)
}
#div2 {
    right: 0
}
.element {
    height: 60px;
    text-align: center;
    font-size: 20px;
    line-height: 60px;
    font-family: sans-serif;
    outline: none;
    background: #F0F2F7;
    margin-bottom: 10px;
    color: #3D4757
}
input {
    width: 100%;
    height: 60px;
    font-size: 20px;
    border: none;
    outline: none;
    color: #3D4757;
    background: #F0F2F7;
    text-align: center;
    margin: 0;
    padding: 0
}
input::-webkit-input-placeholder {
    color: #3D4757;
    opacity: .25
}

<div id="div1" class="element">
    <div class="reciever1 element" contenteditable>Reciever 1</div>
    <div class="reciever1 element" contenteditable>Reciever 1</div>
    <input type="text" class="reciever1 element" placeholder="Reciever 1 Input" />
</div>
<div id="div2" class="element">
    <div class="reciever2 element" contenteditable>Reciever 2</div>
    <div class="reciever2 element" contenteditable>Reciever 2</div>
    <input type="text" class="reciever2 element" placeholder="Reciever 2 Input" />
</div>