Désactiver le collage de texte dans un formulaire HTML

Question

Existe-t-il un moyen d'utiliser JavaScript pour désactiver la possibilité de coller du texte dans un champ de texte d'un formulaire HTML ?

Par exemple J'ai un formulaire d'inscription simple où l'utilisateur doit saisir son adresse électronique deux fois. La deuxième saisie sert à vérifier qu'il n'y a pas de faute de frappe dans la première saisie. Cependant, si l'utilisateur copie/colle son adresse électronique, cela va à l'encontre du but recherché et j'ai vu des utilisateurs rencontrer des problèmes parce qu'ils avaient saisi la mauvaise adresse électronique et l'avaient copiée/collée.

Je n'ai peut-être pas été clair dans ma question, mais je n'essaie pas d'empêcher les gens de copier (ou de sélectionner par glisser-déposer) du texte sur leur navigateur. Je veux juste les empêcher de collage saisie dans un champ de texte afin de minimiser les erreurs de l'utilisateur.

Peut-être qu'au lieu d'utiliser ce "hack", vous pouvez suggérer une autre solution au problème central de ce que j'essaie de résoudre ici ? J'ai effectué moins d'une demi-douzaine de tests utilisateurs et cela s'est déjà produit deux fois. Mon public n'a pas un haut niveau de compétence en informatique.

Answer 1

Ne le faites pas. N'interférez pas avec le navigateur de l'utilisateur. En copiant et collant dans un champ de confirmation de courriel, l'utilisateur accepte la responsabilité de ce qu'il tape. S'il est assez stupide pour copier et coller une adresse erronée (cela m'est arrivé), c'est de sa faute.

Si vous voulez vous assurer que la confirmation par courriel fonctionne, demandez à l'utilisateur de consulter son courriel pendant que votre site attend ("Veuillez ouvrir votre programme de messagerie dans une nouvelle fenêtre"). Affichez l'adresse électronique en grosses lettres ("Le courriel de confirmation a été envoyé à.... a fait une erreur ? Cliquez ici pour changer").

Mieux encore, si vous le pouvez, laissez l'utilisateur disposer d'une sorte d'accès limité sans confirmation. Ainsi, il peut se connecter immédiatement et vous augmentez vos chances de rester en contact avec le visiteur même si le courrier de confirmation est bloqué pour d'autres raisons (par exemple, les filtres anti-spam).

Answer 2

Ajoutez une classe de 'disablecopypaste' aux entrées sur lesquelles vous voulez désactiver la fonctionnalité de copier-coller et ajoutez ce script jQuery.

  $(document).ready(function () {
    $('input.disablecopypaste').bind('copy paste', function (e) {
       e.preventDefault();
    });
  });

Answer 3

J'ai récemment dû, à contrecœur, désactiver le collage dans un élément de formulaire. Pour ce faire, j'ai écrit une implémentation inter-navigateurs* du gestionnaire d'événement onpaste d'Internet Explorer (et d'autres). Ma solution devait être indépendante de toute bibliothèque JavaScript tierce.

Voici ce que j'ai trouvé. Elle ne désactive pas complètement le collage (l'utilisateur peut coller un seul caractère à la fois, par exemple), mais elle répond à mes besoins et évite d'avoir à gérer les keyCodes, etc.

// 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);
                }
            }
        }
    }
})();

S'en servir pour désactiver le collage :

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

---

* Je sais que oninput ne fait pas partie de la spécification DOM du W3C, mais tous les navigateurs avec lesquels j'ai testé ce code - Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7 - supportent soit oninput soit onpaste. De tous ces navigateurs, seul Opera ne supporte pas le onpaste, mais il supporte le oninput.

Remarque : Cela ne fonctionnera pas sur une console ou un autre système qui utilise un clavier à l'écran (en supposant que le clavier à l'écran n'envoie pas les touches au navigateur lorsque chaque touche est sélectionnée). S'il est possible que votre page/application soit utilisée par une personne disposant d'un clavier à l'écran et d'Opera (par exemple : Nintendo Wii, certains téléphones portables), n'utilisez pas ce script à moins que vous n'ayez testé pour vous assurer que le clavier à l'écran envoie des touches au navigateur après chaque sélection de touche.

Answer 4

Vous pouvez..... mais ne le faites pas.

Vous ne devriez pas modifier le comportement par défaut du navigateur d'un utilisateur. C'est vraiment une mauvaise ergonomie pour votre application web. De plus, si un utilisateur souhaite désactiver ce hack, il lui suffit de désactiver le javascript dans son navigateur.

Il suffit d'ajouter ces attributs à la zone de texte

ondragstart=”return false” onselectstart=”return false”

Answer 5

Que diriez-vous d'envoyer un courriel de confirmation à l'adresse électronique que l'utilisateur vient d'entrer deux fois, dans lequel il y a un lien vers une URL de confirmation sur votre site, vous savez alors qu'il a bien reçu le message ?

Toute personne qui ne clique pas pour confirmer la réception de l'e-mail peut avoir saisi une adresse e-mail incorrecte.

Ce n'est pas une solution parfaite, mais juste quelques idées.