События буфера обмена

Интерфейс ClipboardEvent предствляет события, предоставляющие информацию, связанную с изменением буфера обмена, этими события являются copy, cut и paste.

copy

Событие copy вызывается , когда пользователь инициирует операцию копирования через браузер: с помощью комбинации клавиша Ctrl/Cmd + C или выбрав «Copy» из меню или в ответ на разрешенный вызов document.execCommand('copy').

Событие copy также происходит , когда пользователь копирует элемент, например, изображение, созданное с помощью <img> элементом, НО в некоторых браузерах при попытке скопировать изображение событие может не работать.

Поддерживаемые HTML-теги

Все HTML-элементы

Пример

<p><input type='text' oncopy="f(event)" size='70' 
  value=' Попробуйте скопировать этот текст из элемента «input»'></p>
<p  oncopy="f(event)"> Попробуйте скопировать этот текст  из элемента «p»  </p>
<p  oncopy="f(event)">Попробуйте скопировать элемент «img» (домик): 
  <img  oncopy="f(event)" alt='' src="images/home1.png"></p>
<hr>
<p id="demo"></p>
<hr>
<input size='70' placeholder="Скопировать из буфера обмена (Ctrl+V) ">
<script>
function f(event) 
  { event = event || window.event;
    var target = event.target || event.srcElement;
    document.getElementById('demo').innerHTML = 
      'Данные элемента «<b>' + target.tagName +
      '</b>» скопированы в буфер обмена';
  }
</script>

cut

Событие cut вызывается , когда пользователь инициирует операцию «вырезания» через браузер: с помощью комбинации клавиша Ctrl/Cmd + X или выбрав «Cut» из меню или в ответ на разрешенный вызов document.execCommand('cut').

Для элементов, отличных от input необходимо указывать атрибут contenteditable

Поддерживаемые HTML-теги

Все HTML-элементы

Пример

<p><input type='text' oncut="f(event)" size='70' 
  value=' Попробуйте вырезать этот текст из элемента «input»'></p>
<p  contenteditable='true' oncut="f(event)"> 
  Попробуйте вырезать этот текст  из элемента «p»  </p>
<hr>
<p id="demo"></p>
<hr>
<input size='90' placeholder="Скопировать из буфера обмена (Ctrl+V) ">
<script>
function f(event) 
  { event = event || window.event;
    var target = event.target || event.srcElement;
    document.getElementById('demo').innerHTML = 
      'Данные элемента «<b>' + target.tagName +
      '</b>» вырезаны и скопированы в буфер обмена';
  }
</script>

paste

Событие paste происходит, когда пользователь вставляет некоторый контент в элементе, через браузер: с помощью комбинации клавиша Ctrl/Cmd + V или выбрав «Paste» из меню или в ответ на разрешенный вызов document.execCommand('paste').

Для элементов, отличных от input необходимо указывать атрибут contenteditable

Поддерживаемые HTML-теги

Все HTML-элементы

Пример

<p><input type='text' oncut="f(event)" oncopy="f(event)"  onpaste="f(event)" style="width:90%"  
  value=' Попробуйте скопировать, вырезать или вставить данные в этом элементе «input»'>
</p>
<p  contenteditable='true' oncut="f(event)" oncopy="f(event)"  onpaste="f(event)"> 
<hr>
<p id="demo"></p>
<hr>

<script>
function f(event) 
  { event = event || window.event;
    var target = event.target || event.srcElement;
    document.getElementById('demo').innerHTML = 
      'Элемент: «<b>' + 
       target.tagName +
      '</b>»<br>Событие: <b>' + 
       event.type + 
      '</b>';
  }
</script>