Afficher l'événement de modification de valeur dans l'élément d'entrée

Question

Dans le filtrage par Javascript, comment obtenir un événement après que la valeur d'un élément <input> a changé à cause d'un texte traîné et déposé dans le champ?

input.addEventListener("change", cb); // Is not triggered on drop 
input.addEventListener("drop", cb); // Is triggered before the value change 

Un extrait pour démontrer le problème:

let input = document.getElementById('input'); 
 
let button = document.getElementById('button'); 
 
let div = document.getElementById('div'); 
 

 
function log(msg) { 
 
\t let el = document.createElement('pre'); 
 
\t el.textContent = msg; 
 
\t div.appendChild(el); 
 
} 
 

 
input.addEventListener("change", function() { 
 
\t log("CHANGE: " + input.value); 
 
}); 
 

 
input.addEventListener("keyup", function() { 
 
\t log("KEYUP: " + input.value); 
 
}); 
 

 
input.addEventListener("drop", function() { 
 
\t log("DROP: " + input.value); 
 
}); 
 

 
button.addEventListener("click", function() { 
 
\t log("CLICK: " + input.value); 
 
}); 
 

 
log("Try dragging text into the input field");

<input id="input"></input> 
 
<button id="button">Click</button> 
 
<div id="div"></div>

Answer 1

Vous pouvez obtenir la valeur de texte des données déposées par la méthode getData:

// This will get the current data value dropped as a string 
event.dataTransfer.getData("text"); 

et empêcher que cette même valeur soit définie dans l'entrée avec:

// This will prevent the input to be changed with the dropped data 
event.preventDefault(); 

Ainsi, le gestionnaire d'événements complet serait comme ceci:

input.addEventListener('drop', function (event) { 
    event.preventDefault(); 
    var textData = event.dataTransfer.getData('text'); 
    // do whatever you want with the the text data 
}); 

Ainsi, au lieu d'essayer d'obtenir la valeur d'entrée au bon moment, vous pouvez intercepter les données de la déposer un événement et faire des choses avec. Vous pourriez même le définir comme texte plus tard. Faites-moi savoir si cela résout votre problème.