JS код - Копирование из input

498

07 июня 2017, 05:36

Есть код. Он работает только для идентификаторов - input и bCopy. У меня таких на одной странице используется 45 (.., input44, input45). Собсна, при нажатии срабатывает один и тот же эвент, на каждой кнопке, и копирует одинаковую информацию. Как подправить код, чтобы событие срабатывало для каждого идентификатора отдельно?

Спасибо.

function copy(str) {
  let tmp = document.createElement('INPUT'),
    focus = document.activeElement;
  tmp.value = str;
  document.body.appendChild(tmp);
  tmp.select();
  document.execCommand('copy');
  document.body.removeChild(tmp);
  focus.focus()
}
document.addEventListener('DOMContentLoaded', e = > {
  let input = document.querySelector('#input'),
    bCopy = document.querySelector('#bCopy'),
    log = document.querySelector('#log');
  bCopy.addEventListener('click', e = > {
    if (input.value) {
      try {
        copy(input.value);
        log.style.color = 'green';
        log.innerHTML = 'Скопировано!'
      } catch (e) {
        log.style.color = 'red';
        log.innerHTML = 'Ошибка!'
      }
    }
  })
});

Answer 1

Если у вас много инпутов и кнопок рядом с ними - даете кнопкам определенный класс, по которому в цикле навешиваете обработчик клика + добавляете привязку (в данном случаете - с помощью аттрибута rel) с нужным инпутом. Чтобы сберечь контекст (важно для обработчика клика), стрелочные функции были поменяны на обычные.

function copy(str) { 
  let tmp = document.createElement('INPUT'), 
    focus = document.activeElement; 
  tmp.value = str; 
  document.body.appendChild(tmp); 
  tmp.select(); 
  document.execCommand('copy'); 
  document.body.removeChild(tmp); 
  focus.focus(); 
} 
document.addEventListener('DOMContentLoaded', function(e) { 
 
  let buttons = document.querySelectorAll('.cCopy'), 
    log = document.querySelector('#log'); 
  for (var i = 0; i < buttons.length; i++) { 
    buttons[i].addEventListener('click', function(e) { 
      let inputClass = this.getAttribute('rel'), 
        input = document.querySelector('.' + inputClass); 
 
      if (input.value) { 
        try { 
          copy(input.value); 
          log.style.color = 'green'; 
          log.innerHTML = 'Скопировано!' 
        } catch (e) { 
          log.style.color = 'red'; 
          log.innerHTML = 'Ошибка!' 
        } 
      } 
    }); 
  } 
});

<input class="input1" /><button class="cCopy" rel="input1">Copy</button><br /> 
<input class="input2" /><button class="cCopy" rel="input2">Copy</button><br /> 
<input class="input3" /><button class="cCopy" rel="input3">Copy</button><br /> 
<input class="input4" /><button class="cCopy" rel="input4">Copy</button><br /> 
<input class="input5" /><button class="cCopy" rel="input5">Copy</button><br /> 
<div id="log"></div>

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

JavaScript: конфликт двойной и тройной комбинации клавиш

В этом эксперименте исследуется конфликт двойной и тройной комбинации клавиш (например alt+t и alt+shift+t)По замыслу, при нажатии alt+t должен измениться...

380

javascript