Empêcher le copier-coller dans un champs input HTML

J’ai eu à trouver un moyen d’empêcher le copier-coller dans un champs input HTML, et donc je partage ici les résultats de mes recherches. C’est intéressant à plusieurs titres. Sachez qu’il existe un évènement onPaste sur les champs input (et textarea, sans doute), supporté par la large majorité des navigateurs récents (mais pas Opéra). Au passage cet évènement ne semble pas prévu par le W3C (sur la page des DOM Events, Wikipedia liste cet événement comme IE only…).

Mais bref, pour être sûr et certain, on va utiliser plusieurs méthodes qui s’assurent que ça fonctionne bien sous tous les navigateurs.

Bloquer onPaste avec JQuery

Une solution est fournie là (et la même est redonnée là). J’ai testé, ça fonctionne niquel : que ce soit le Ctrl+V, le clic droit + coller, bref, ça bloque tout. J’ai retenu cette solution.

<script type="text/javascript">
   $(document).ready(function () {
      $('#id_of_textbox').bind('paste', function (e) {
         e.preventDefault();
      });
   });
</script>

Sachant que si on veut bloquer le Copier/Couper, on peut rajouter cut et copy dans le bind(‘paste’, ce qui donnera bind(‘cut copy paste’

Bloquer le onPaste sans JQuery

J’ai trouvé sur le web deux solutions pour rajouter manuellement le onPaste dans le navigateur, et ce sans utiliser JQuery.

La première solution, trouvée sur StackOverflow :

<script type="text/javascript">
// Register onpaste on inputs and textareas in browsers that don't
// natively support it.
(function () {
    var onload = window.onload;

    window.onload = function () {
        if (typeof onload == "function") {
            onload.apply(this, arguments);
        }

        var fields = [];
        var inputs = document.getElementsByTagName("input");
        var textareas = document.getElementsByTagName("textarea");

        for (var i = 0; i < inputs.length; i++) {
            fields.push(inputs[i]);
        }

        for (var i = 0; i < textareas.length; i++) {
            fields.push(textareas[i]);
        }

        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];

            if (typeof field.onpaste != "function" && !!field.getAttribute("onpaste")) {
                field.onpaste = eval("(function () { " + field.getAttribute("onpaste") + " })");
            }

            if (typeof field.onpaste == "function") {
                var oninput = field.oninput;

                field.oninput = function () {
                    if (typeof oninput == "function") {
                        oninput.apply(this, arguments);
                    }

                    if (typeof this.previousValue == "undefined") {
                        this.previousValue = this.value;
                    }

                    var pasted = (Math.abs(this.previousValue.length - this.value.length) > 1 && this.value != "");

                    if (pasted && !this.onpaste.apply(this, arguments)) {
                        this.value = this.previousValue;
                    }

                    this.previousValue = this.value;
                };

                if (field.addEventListener) {
                    field.addEventListener("input", field.oninput, false);
                } else if (field.attachEvent) {
                    field.attachEvent("oninput", field.oninput);
                }
            }
        }
    }
})();
</script>

En utilisant directement le onPaste

On peut de toute façon utiliser le onPaste, en oubliant les utilisateurs sous Opera, en utilisant ça, tout simplement :

<input type="text" onpaste="return false;" />

3 réflexions sur « Empêcher le copier-coller dans un champs input HTML »

  1. L’archétype même de la fausse bonne idée. Irritant au possible.

    RépondreRépondre
  2. Oui et non. Sur un champs de mot de passe, ça peut permettre de vérifier que la personne tape bien un mot de passe (et non qu’elle le copie-colle de quelque part), et de cette facon on s’assure que la personne y a bien réflechi avant (du coup ça évite qu’elle l’oublie dans les 5 minutes).

    RépondreRépondre
  3. En contrepartie, copier coller son mot de passe evite qu’un keylogger le récupère trop facilement, puisqu’il n’ pas été saisi.
    Et surtout, si je suis obligé de taper mon mot passe, bah je vais ailleurs, parce que je suis fainéant et que je l’assume.

    Mais j’avoue que le mieux, ca serait qu’on arrete de nous saouler du matin au soir à être obligé de créer des comptes partout ou on va. à ce rythme là, il faudra bientôt un compte email+password différent chez chaque fabriquant de chiottes pour pouvoir aller pisser un coup. Avec obligation de saisir le mot de passe en entier, et que celui ci soit « sûr » (avec des majuscules, minuscules et caracteres spéciaux)

    RépondreRépondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.