0

Есть код. Он работает только для идентификаторов - 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 = 'Ошибка!'
      }
    }
  })
});
1
  • Кнопка должна копировать содержимое соседнего инпута или текущего под фокусом?
    – br3t
    5 июн 2017 в 20:02

1 ответ 1

2

Если у вас много инпутов и кнопок рядом с ними - даете кнопкам определенный класс, по которому в цикле навешиваете обработчик клика + добавляете привязку (в данном случаете - с помощью аттрибута 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.