Блог

Главная - Вопросы по программированию - Как добавить EventListener, который влияет на состояние после вставки (а не прямо перед ней)?

Как добавить EventListener, который влияет на состояние после вставки (а не прямо перед ней)?

#javascript #html #events #listener #copy-paste

#javascript #HTML #Мероприятия #слушатель #копировать-вставить

Вопрос:

Пример:

 <!DOCTYPE html>
<html>
<body>

<input type="text" id="myText" value="some text">

<button id='coolButton' onclick="coolFunction()">Click me</button>

<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>

<script>

//display whatever is in the textbox in a text span below it 
function coolFunction() {
  word = document.getElementById("myText").value; 
  document.getElementById("enteredBox").innerHTML = word;
}

//trigger coolFunction() whenever something is pasted into the text box
document.getElementById('myText').addEventListener('paste', () => {
  document.getElementById("coolButton").click();
});

</script>

</body>
</html>

Когда я нажимаю кнопку «Нажмите меня», все, что в данный момент находится в текстовом поле, правильно отображается под ним.
Я хочу, чтобы такое же поведение происходило автоматически, когда пользователь вставляет в поле. Поэтому я добавляю прослушиватель событий в текстовое поле, прослушивающее вставку.

Однако код внутри этого прослушивателя вставки работает с тем, что было в текстовом поле перед вставкой. т.Е. Если в текстовом поле есть «a», и пользователь вставляет «b» в поле, ниже будет отображаться только «a» (а не «ab»).

Как мне заставить код прослушивателя событий вступить в силу после завершения вставки?

Я пробовал такие вещи, как заставить его подождать пару секунд или отобразить в отдельном элементе, но код функции вставки всегда считывает то, что было в поле до вставки, а не после.

Ответ №1:

Как мне заставить код прослушивателя событий вступить в силу после завершения вставки?

Вы можете использовать .getData():

Метод dataTransfer.getData() извлекает данные перетаскивания (в виде DOMString) для указанного типа. Если операция перетаскивания не включает данные, этот метод возвращает пустую строку.

Чтобы получить данные буфера обмена, вам необходимо использовать параметр event для вашего обработчика событий вставки в соответствии с документацией.

Фрагмент:

 function coolFunction() {
  word = document.getElementById("myText").value;
  document.getElementById("enteredBox").innerHTML = word;
}

document.getElementById('myText').addEventListener('paste', function(e)  {
  // get the data from the clipboard.....
  var txt = e.clipboardData.getData('text');
  
  // use the data
  document.getElementById("enteredBox").innerHTML = txt;
});  
 <input type="text" id="myText" value="some text">

<button id='coolButton' onclick="coolFunction()">Click me</button>

<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>

Или, если вам нужно получить данные после завершения действия вставки, вы можете отложить событие щелчка с помощью .setTimeout() . В этом случае ваш код:

 document.getElementById("coolButton").click();

становится:

 setTimeout(() => document.getElementById("coolButton").click(), 10)

Фрагмент:

 //display whatever is in the textbox in a text span below it
function coolFunction() {
    word = document.getElementById("myText").value;
    document.getElementById("enteredBox").innerHTML = word;
}

//trigger coolFunction() whenever something is pasted into the text box
document.getElementById('myText').addEventListener('paste', (e)  =>
   setTimeout(() => document.getElementById("coolButton").click(), 10)
);  
 <input type="text" id="myText" value="some text">

<button id='coolButton' onclick="coolFunction()">Click me</button>

<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>

Последнее решение может вообще избежать кнопки и может быть основано на событии ввода.

Фрагмент:

 document.getElementById('myText').addEventListener('input', function(e)  {
    word = document.getElementById("myText").value;
    document.getElementById("enteredBox").innerHTML = word;
});  
 <input type="text" id="myText" value="some text">



<br><br>
<span>Entered:</span>
<span id="enteredBox"/>

Комментарии:

1. Большое вам спасибо, оба они работают. Не могли бы вы подробнее объяснить первый метод, включающий чтение непосредственно из буфера обмена? Я не понимаю, почему e переменная будет содержать информацию буфера обмена. Я думал e , что всегда есть информация об ошибке. Документы Mozilla также немного сбивают с толку, потому что в API буфера обмена есть отдельная страница, которая имеет функцию с идентичным именем…

2. @JamesRonald Переменная e в прослушивателе событий является событием. Я обновил ответ, добавив ссылку на документацию. Я надеюсь, что это поможет вам. Спасибо