JQuery en utilisant event.preventDefault() avec on('input')

Question

Je capte les événements de collage avec $('sélecteur').on('input', function(event) { ... });

Ensuite, j'essaie de tester ce qui a été collé et, si cela ne passe pas la validation, d'annuler le collage avec event.preventDefault(). Malheureusement, au moment où la fonction d'écoute est exécutée, le texte a déjà été collé et event.preventDefault() ne fait rien.

Alors, quelle est la meilleure façon de capturer les événements de collage et, si ce qui a été collé ne valide pas, annuler/prévenir le collage ?

Je sais que je peux utiliser .on('paste', function(event) { ... }), mais cela ne me donne pas le texte qui a été collé ni le contenu de l'élément d'entrée après le collage, à moins d'utiliser setTimeout() avec un temps d'attente minime, et j'aimerais éviter d'utiliser setTimeout().

Answer 1

Tout d'abord, quelques informations sur l'ordre de déclenchement des événements pour l'élément input :

keydown -> keypress -> paste -> input -> keyup -> change

Chaque fois que vous appelez preventDefault, cela arrête les chaînes, comme si rien ne s'était passé.

Alors ma suggestion est de capturer l'événement de collage, d'empêcher son comportement par défaut et d'y mettre votre logique.

Je sais que je peux utiliser .on('paste', function(event) { ... }), mais cela ne me donne pas le texte qui a été collé ni le contenu de l'élément d'entrée après le collage

En fait, vous pouvez récupérer le contenu du presse-papiers. Voir cette doc. Le support est présent sur tous les navigateurs principaux (mais seulement IE11+). Je ne sais pas si, au moment de la rédaction de la question, cette fonctionnalité était disponible ou non.

Exemple Fiddle

$('#myInput').on('paste', function(e) {
    // Annuler l'événement - cela empêche le texte d'être saisi dans l'input et arrête la chaîne d'événements
    e.preventDefault();

    // Obtenir le contenu du presse-papiers
    let paste = (event.clipboardData || window.clipboardData).getData('text');

    // Valider ce qui est collé       
    if (paste == "texte à coller") {
        // Si la condition est satisfaite, définir manuellement la valeur de l'input
        $(this)
            .val(paste)
            // Déclencher manuellement les événements si vous le souhaitez
            .trigger('input')
            .trigger('change');
    }
});

Remarques sur le code :

• Cette solution n'inclut pas de setTimeout. Chaque fois que vous le faites avec setTimeout, vous voyez pendant un très court laps de temps le texte copié, comme un effet de clignotement.
• Si le texte répond à la condition, je le définis manuellement dans l'élément input. Cependant, cela ne déclenche pas les événements input et change. Si vous en avez besoin, déclenchez-les manuellement
• Une approche similaire est de d'abord vérifier le texte et s'il ne répond pas aux exigences, appeler preventDefault, sinon ne rien faire. De cette façon, vous évitez de définir manuellement la valeur dans l'input et de déclencher les événements par la suite.

Answer 2

Essayez d'utiliser l'événement .change de jquery.

Définissez la valeur sur vide si elle ne satisfait pas votre condition.

Answer 3

Utiliser

$('selector').on('input', function(event) { ... }); 

et dans le cas où la validation ne passe pas supprimer le texte collé semble fonctionner pour moi.

Malheureusement, accéder au presse-papiers a quelques défauts (le navigateur demande s'il est autorisé à inspecter le presse-papiers, la compatibilité entre navigateurs, etc.)

Si vous êtes d'accord pour sauvegarder la dernière valeur de l'entrée, le texte collé peut être calculé de toute façon.

Voici mon approche pour calculer le texte collé

https://jsfiddle.net/f710o9qd/2/

J'espère que cela vous aidera :)

(N'hésitez pas à affiner le calcul du texte collé si vous trouvez des défauts)

Answer 4

Ma compréhension de la question est que nous ne devons pas permettre à des données d'être collées dans la zone de texte tant qu'elles ne passent pas une validation spécifique. Au lieu d'utiliser event.preventDefault(), nous pouvons capturer la valeur lorsque l'utilisateur entre du contenu, en utilisant l'écouteur on('input') et la valider par rapport à une condition spécifique. Si la validation échoue, vider la valeur de la zone de texte.

(Ceci est une solution de contournement si nous devons toujours utiliser l'écouteur d'événement on('input'))

Exemple de code (j'utilise console.log() pour imprimer la valeur collée) :

HTML:

JS:

$(document).ready(function() {
 $('#selector').on('input', function (e){
        if(e.target.value !== "maValeur"){
        $('#selector').val('');
    }
    else{
        console.log(e.target.value);
    }
 });
});