web-dev-qa-db-fra.com

jquery comment obtenir le contenu collé

J'ai un peu de mal à saisir un texte collé dans mon entrée:

 <input type="text" id="myid" val="default">
 $('#myid').on('paste',function(){
        console.log($('#myid').val());
 });

console.log montre:

default

Comment puis-je catch le texte collé et être prêt à utiliser?

jquerypaste
26
greenbandit

Les navigateurs modernes prennent désormais en charge l'événement input, qui se déclenchera une fois le contenu collé.

$('#myid').on('input', function() {
    console.log($('#myid').val()); 
});

Lors du collage dans une entrée, l'événement paste est déclenché avant que la valeur ait le temps de se mettre à jour.
Un moyen de résoudre ce problème consiste à différer l'extraction de la valeur jusqu'à ce que l'entrée ait eu le temps de se mettre à jour:

$('#myid').on('paste', function() {
    setTimeout(function () { 
        console.log($('#myid').val()); 
    }, 100);
});

Il est également possible d’obtenir les données directement du presse-papiers plutôt que de la valeur des entrées, en accédant à event.clipboardData; toutefois, cette technique est expérimentale, elle n’est pas prise en charge par tous les navigateurs et, à mon avis, plus compliquée que l’événement input, voire délai d'attente simple.

38
adeneo

La réponse acceptée est en fait hacky et laid, semble être suggérée assez souvent pour l’événement coller sur stackoverflow. Je pense qu'une meilleure façon de le faire est ceci

$('#someInput').bind('paste', function(e) {
    var data = e.originalEvent.clipboardData.getData('Text');
    //IE9 Equivalent ==> window.clipboardData.getData("Text");   
});
48
cateyes

Plus grande image, je pense que vous voulez généralement trois événements:

  1. Quand l'utilisateur colle
  2. Lorsque l'utilisateur appuie sur <Entrée>
  3. Lorsque la zone de texte perd le focus. 

Je ne veux pas on('input') car cela soulève un événement pour chaque pression de touche.

De cette façon, vous obtenez un événement, lorsque l'utilisateur a terminé en faisant une entrée dans la zone de texte.

$(document).ready(function () {

            $('#myid').keydown(function (e) {
                var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
                if (key == 13) {
                    e.preventDefault();
                    alert($(this).val());
                }
            }).on("change", function () {
                alert($(this).val());
            }).on("paste", function (e) {
                var _this = this;
                // Short pause to wait for paste to complete
                setTimeout(function () {
                    alert($(_this).val());
                }, 100);
            });
        });
0
mike

$('#myid').on('paste' , function(e){
   get_content(this);
});

function get_content(gelen){
var value_input = $(gelen).val();
document.getElementById("write-value").innerHTML = value_input;
console.log(value_input);
}
input{ width: calc(100% - 16px); padding:8px; font-size:large}
div{ color:red; margin-top:16px; padding:8px; font-size:large}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myid" onkeyUP="get_content(this)" >

<div id="write-value">
</div>

0
Murat Kezli