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;" />

AbriCoCotier.fr, 2011. | Permalien | 3 commentaires | Plugin Better Feed, par Ozh
Rangé dans : JavaScript, Programmation, Tutoriel

Cet article Empêcher le copier-coller dans un champs input HTML est apparu en premier sur AbriCoCotier.fr.