Catch coller l'entrée

Je cherche un moyen de filtrer les entrées que je colle dans le navigateur, est-ce possible avec jQuery?

J'ai réussi à trouver cela jusqu'à présent:

$(this).live(pasteEventName, function(e) {
 // this is where i would like to sanitize my input
 return false;
}

Malheureusement, mon développement est arrivé à un point d'arrêt à cause de ce problème "mineur". Je ferais vraiment de moi un campeur heureux si quelqu'un pouvait m'orienter dans la bonne direction.

OK, je suis juste tombé sur le même problème .. J'ai parcouru le long chemin

$('input').on('paste', function () {
  var element = this;
  setTimeout(function () {
    var text = $(element).val();
    // do something with text
  }, 100);
});

Juste un petit timeout jusqu'à ce que func .val () puisse être rempli.

E.

Vous pouvez réellement saisir la valeur directement de l' événement . C'est un peu obtus comment y arriver.

Retournez false si vous ne voulez pas que cela passe.

$(this).on('paste', function(e) {

  var pasteData = e.originalEvent.clipboardData.getData('text')

});

Pour la compatibilité multiplateforme, il doit gérer les événements oninput et onpropertychange:

$ (something).bind ("input propertychange", function (e) {
    // check for paste as in example above and
    // do something
})

Je l'ai en quelque sorte corrigé en utilisant le code suivant:

$("#editor").live('input paste',function(e){
    if(e.target.id == 'editor') {
        $('<textarea></textarea>').attr('id', 'paste').appendTo('#editMode');
        $("#paste").focus();
        setTimeout($(this).paste, 250);
    }
});

Maintenant, j'ai juste besoin de stocker l'emplacement du curseur et de l'ajouter à cette position, alors je suis prêt ...

Hmm ... Je pense que vous pouvez utiliser e.clipboardDatapour attraper les données collées. Si cela ne fonctionne pas, jetez un œil ici .

$(this).live("paste", function(e) {
    alert(e.clipboardData); // [object Clipboard]
});

Écoutez l'événement coller et définissez un écouteur d'événement keyup. À la clé, capturez la valeur et supprimez l'écouteur d'événement de clé.

$('.inputTextArea').bind('paste', function (e){
    $(e.target).keyup(getInput);
});
function getInput(e){
    var inputText = $(e.target).val();
    $(e.target).unbind('keyup');
}

$("#textboxid").on('input propertychange', function () {
    //perform operation
        });

Cela fonctionnera bien.

Cela se rapproche de ce que vous pourriez souhaiter.

function sanitize(s) {
  return s.replace(/\bfoo\b/g, "~"); 
};

$(function() {
 $(":text, textarea").bind("input paste", function(e) {
   try {
     clipboardData.setData("text",
       sanitize(clipboardData.getData("text"))
     );
   } catch (e) {
     $(this).val( sanitize( $(this).val() ) );
   }
 });
});

Veuillez noter que lorsque l'objet clipboardData n'est pas trouvé (sur les navigateurs autres qu'IE), vous obtenez actuellement la valeur complète de l'élément + la valeur du presse-papiers.

Vous pouvez probablement faire quelques étapes supplémentaires pour dif les deux valeurs, avant une entrée et après l'entrée, si vous êtes vraiment seulement après quelles données ont vraiment été collées dans l'élément.

 $('').bind('input propertychange', function() {....});                      

Cela fonctionnera pour l'événement de collage de souris.

Que diriez-vous de comparer la valeur d'origine du champ et la valeur modifiée du champ et de déduire la différence comme valeur collée? Cela capture le texte collé correctement même s'il existe du texte dans le champ.

http://jsfiddle.net/6b7sK/

function text_diff(first, second) {
    var start = 0;
    while (start < first.length && first[start] == second[start]) {
        ++start;
    }
    var end = 0;
    while (first.length - end > start && first[first.length - end - 1] == second[second.length - end - 1]) {
        ++end;
    }
    end = second.length - end;
    return second.substr(start, end - start);
}
$('textarea').bind('paste', function () {
    var self = $(this);
    var orig = self.val();
    setTimeout(function () {
        var pasted = text_diff(orig, $(self).val());
        console.log(pasted);
    });
});

Ce code fonctionne pour moi, soit coller à partir du clic droit, soit copier coller directement

   $('.textbox').on('paste input propertychange', function (e) {
        $(this).val( $(this).val().replace(/[^0-9.]/g, '') );
    })

Quand je le colle, Section 1: Labour Costil devient 1dans la zone de texte.

Pour autoriser uniquement la valeur flottante, j'utilise ce code

 //only decimal
    $('.textbox').keypress(function(e) {
        if(e.which == 46 && $(this).val().indexOf('.') != -1) {
            e.preventDefault();
        } 
       if (e.which == 8 || e.which == 46) {
            return true;
       } else if ( e.which < 48 || e.which > 57) {
            e.preventDefault();
      }
    });

document.addEventListener('paste', function(e){
    if(e.clipboardData.types.indexOf('text/html') > -1){
        processDataFromClipboard(e.clipboardData.getData('text/html'));
        e.preventDefault();

        ...
    }
});

Plus loin:

• API du presse-papiers et événements

Voir cet exemple: http://www.p2e.dk/diverse/detectPaste.htm

Il suit essentiellement chaque changement avec un événement oninput, puis vérifie s'il s'agit d'une comparaison de collage par chaîne. Oh, et dans IE, il y a un événement onpaste. Alors:

$ (something).bind ("input paste", function (e) {
    // check for paste as in example above and
    // do something
})

Cette méthode utilise jqueries contents (). Unwrap ().

1. Tout d'abord, détectez l'événement coller
2. Ajoutez une classe unique aux balises qui sont déjà dans l'élément dans lequel nous collons.

3. Après un délai donné, parcourez toutes les balises de déballage du contenu qui n'ont pas la classe que vous avez définie plus tôt. Remarque: Cette méthode ne supprime pas les balises à fermeture automatique comme
   voir un exemple ci-dessous.

   //find all children .find('*') and add the class .within .addClass("within") to all tags
   $('#answer_text').find('*').each(function () {
   $(this).addClass("within");
   });
   setTimeout(function() {
   $('#answer_text').find('*').each(function () {
       //if the current child does not have the specified class unwrap its contents
       $(this).not(".within").contents().unwrap();
   });
   }, 0);

Cela s'est révélé assez illusoire. La valeur de l'entrée n'est pas mise à jour avant l'exécution du code à l'intérieur de la fonction d'événement coller. J'ai essayé d'appeler d'autres événements à partir de la fonction d'événement de collage, mais la valeur d'entrée n'est toujours pas mise à jour avec le texte collé dans la fonction des événements. C'est tous les événements à l'exception de keyup. Si vous appelez keyup depuis la fonction d'événement coller, vous pouvez nettoyer le texte collé depuis la fonction d'événement keyup. ainsi...

$(':input').live
(
    'input paste',
    function(e)
    {
        $(this).keyup();
    }
);

$(':input').live
(
    'keyup',
    function(e)
    {
        // sanitize pasted text here
    }
);

Il y a une mise en garde ici. Dans Firefox, si vous réinitialisez le texte d'entrée à chaque saisie, si le texte est plus long que la zone visible autorisée par la largeur d'entrée, la réinitialisation de la valeur à chaque saisie interrompt la fonctionnalité du navigateur qui fait défiler automatiquement le texte jusqu'à la position du curseur au fin du texte. Au lieu de cela, le texte revient au début, laissant le curseur hors de vue.

Script pour supprimer les caractères spéciaux de tous les champs avec la classe portlet-form-input-field:

// Remove special chars from input field on paste
jQuery('.portlet-form-input-field').bind('paste', function(e) {
    var textInput = jQuery(this);
    setTimeout(function() {
        textInput.val(replaceSingleEndOfLineCharactersInString(textInput.val()));
    }, 200);
});

function replaceSingleEndOfLineCharactersInString(value) {
    <%
        // deal with end-of-line characters (\n or \r\n) that will affect string length calculation,
        // also remove all non-printable control characters that can cause XML validation errors
    %>
    if (value != "") {
        value = value.replace(/(\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x0B|\x0C|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F)/gm,'');
        return value = value.replace(/(\r\n|\n|\r)/gm,'##').replace(/(\#\#)/gm,"\r\n");
    }
}

Il y a une mise en garde ici. Dans Firefox, si vous réinitialisez le texte d'entrée à chaque saisie, si le texte est plus long que la zone visible autorisée par la largeur d'entrée, la réinitialisation de la valeur à chaque saisie interrompt la fonctionnalité du navigateur qui fait défiler automatiquement le texte jusqu'à la position du curseur au fin du texte. Au lieu de cela, le texte revient au début, laissant le curseur hors de vue.

function scroll(elementToBeScrolled) 
{
     //this will reset the scroll to the bottom of the viewable area. 
     elementToBeScrolled.topscroll = elementToBeScrolled.scrollheight;
}