使用 (keydown/keyup) 上的类更新 div 和输入

Question

问题

下面的工作演示

我正在尝试实现broadcaster 和receiver function()。
broadcaster 是当前正在输入的元素，broadcast 是 receivers 的内容。

在不断的迭代中……我永远无法通过function使其正常工作
我可以让它工作的唯一方法是硬编码它。
唯一的问题是……如果我有 14 个接收器……我必须对所有 14 个接收器进行硬编码。

我尝试了什么

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");

#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;}

<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>

它是如何工作的

//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 )

#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;}

<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>

Answer 1

您已经很接近了，但有一些问题：

问题：

1. 当您想将事件侦听器添加到数组时会出现问题 对象。
2. 你在搞砸事件。你真正需要的活动是 keyup，不是keydown，因为这个事件不能返回typed 价值。

解决方案：

1. 您可以只使用closure 来保存该迭代的索引。 否则有由相同的功能范围共享，并会给出 你的价值相同的迭代。创建一个单独的函数 for each 将保存函数内部的状态。
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>