Обновление div и входов с включенными классами (keydown / keyup) - PullRequest
Новая
       55

Обновление div и входов с включенными классами (keydown / keyup)

0 голосов
/ 18 мая 2018

Проблема

Рабочая демонстрация ниже

Я пытаюсь добиться 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>

1 Ответ

0 голосов
/ 19 мая 2018

Вы здесь близки, но есть несколько неправильных вещей:

Проблема:

  1. Проблема возникает, когда вы хотите добавить прослушиватели событийк массиву объектов.
  2. Вы путаете события.Событие, которое вам действительно нужно, это keyup, а не keydown, поскольку это событие не может вернуть введенное значение.

Решение:

  1. Вы можете просто использовать замыкание , чтобы сохранить индекс этой итерации.В противном случае они будут совместно использоваться одной и той же областью действия и предоставят вам значение одной и той же итерации.Создание отдельной функции для каждой сохранит ее состояние внутри функции.
  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>
...