Désactiver le collage de texte dans un formulaire HTML


96

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

Par exemple, j'ai un formulaire d'inscription simple dans lequel l'utilisateur doit saisir son adresse e-mail deux fois. La deuxième entrée de courrier électronique consiste à vérifier qu'il n'y a pas de fautes de frappe dans la première entrée de courrier électronique. Cependant, si l'utilisateur copie / colle son e-mail, cela va à l'encontre de l'objectif et j'ai rencontré des utilisateurs ayant des problèmes parce qu'ils ont entré le mauvais e-mail et l'ont copié / collé.

Peut-être que je n'ai pas été clair sur ma question, mais je n'essaie pas d'empêcher les gens de copier (ou de faire glisser la sélection) du texte sur leur navigateur. Je veux juste les empêcher de coller l' entrée dans un champ de texte pour minimiser l'erreur 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 fait 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 maîtrise de l'informatique.


111
Empêcher les gens de copier / coller leur adresse e-mail de leur carnet d'adresses vers leur navigateur. Cela se passera bien.
Quentin

28
Je ne peux pas faire grand-chose quand c'est un client qui insiste sur le changement. profitez de votre boisson :)
justinl

15
Cela pourrait être parfaitement bien s'il désactive le collage dans le champ de vérification uniquement lorsque l'e-mail n'a PAS été collé dans le champ d'origine. En d'autres termes, l'utilisateur devra soit coller l'e-mail dans les deux champs, soit dans aucun des deux champs.
GJ.

25
Si un client le demande, dites-lui à quel point l'idée est mauvaise. C'est un excellent moyen de faire chier un client au moment où il est le plus susceptible de s'éloigner (au moment de l'inscription). Vous ne voulez pas qu'une relation client commence avec l'aliénation du client. Cette pratique devient de plus en plus courante et de plus en plus répréhensible à mesure que de plus en plus de personnes utilisent des gestionnaires de mots de passe. Voir aussi: ux.stackexchange.com/q/21062/9529 et ob. xkcd: xkcd.com/970
Mark Booth

J'ai trouvé cette question en cherchant comment vaincre cette "fonctionnalité" avec l'inspecteur d'élément. Ça a marché!
SVD

Réponses:


53

J'ai récemment dû désactiver à contrecœur le collage dans un élément de formulaire. Pour ce faire, j'ai écrit une implémentation multi-navigateurs * du gestionnaire d'événements 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é. Cela ne désactive pas complètement le collage (l'utilisateur peut coller un seul caractère à la fois, par exemple), mais cela répond à mes besoins et évite d'avoir à traiter des 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);
                }
            }
        }
    }
})();

Pour utiliser ceci afin de 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 - prennent en charge en entrée ou en pâte. Sur tous ces navigateurs, seul Opera ne prend pas en charge onpaste, mais il prend en charge 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 de touches au navigateur lorsque chaque touche est sélectionnée). S'il est possible que votre page / application puisse être utilisée par quelqu'un avec un clavier à l'écran et Opera (par exemple: Nintendo Wii, certains téléphones mobiles), n'utilisez pas ce script à moins que vous n'ayez testé pour vous assurer que le clavier à l'écran envoie les clés au navigateur après chaque sélection de clé.


58
Pour empêcher Firefox d'obéir à cette stupide règle, accédez à about: config et remplacez dom.event.clipboardevents.enabled par false
lolesque

1
même si je n'inclus pas les js que vous avez écrits, je suis en mesure d'empêcher l'utilisateur de coller quoi que ce soit en incluant simplement onpaste="return false", y a-t-il un problème si
j'adopte

@viveksinghggits Le code implémente onpastedans les navigateurs qui ne le fournissent pas déjà. Vous dites " Je suis en mesure d'empêcher l'utilisateur de coller quoi que ce
AnnanFay

En ce qui concerne l'implémentation, je vois deux améliorations évidentes: 1) exécuter uniquement le code dans les navigateurs où le collage n'est pas déjà pris en charge, 2) réexécuter lorsque le DOM est modifié - actuellement, il ne sera pas appliqué aux entrées ajoutées dynamiquement.
AnnanFay

@ Rick, donc vous êtes d'accord avec les zones de texte où les utilisateurs peuvent y coller quoi que ce soit? Parce qu'ils s'attendront à ce qu'il soit exactement le même dans d'autres écrans où les données collées sont affichées et ils s'attendront à ce qu'il soit exactement le même lorsque ces données sont insérées dans un e-mail. Pour moi, je ne veux pas des appels téléphoniques et des e-mails d'assistance qui vont avec. Pour désactiver le collage dans un champ particulier est une option et une question viable, à mon humble avis. Le problème que la plupart d'entre nous rencontrent est lorsque nous utilisons des "éditeurs de texte enrichi" - ces éléments semblent remplacer les commandes javascript ou jquery présentes pour empêcher le collage.
McAuley

144

Ne fais pas ça. Ne jouez pas avec le navigateur de l'utilisateur. En copiant + collant dans un champ de confirmation de courrier électronique, l'utilisateur accepte la responsabilité de ce qu'il tape. S'ils sont assez stupides pour copier + coller une adresse défectueuse (cela m'est arrivé), c'est leur propre faute.

Si vous voulez vous assurer que la confirmation par e-mail fonctionne, demandez à l'utilisateur de vérifier son e-mail pendant que votre site attend ("Veuillez ouvrir votre programme de messagerie Web dans une nouvelle fenêtre"). Afficher l'adresse e-mail en grosses lettres ("L'e-mail de confirmation a été envoyé à .... a fait une erreur? Cliquez ici pour changer).

Mieux encore, si vous le pouvez, laissez l'utilisateur avoir un accès limité sans confirmation. De cette façon, ils peuvent se connecter immédiatement et vous augmentez vos chances de rester en contact avec le visiteur même si l'e-mail de confirmation est bloqué pour d'autres raisons (par exemple des filtres anti-spam).


6
Je suis d'accord avec votre réponse pour un scénario où les utilisateurs saisissent eux-mêmes des données. Cependant, lorsqu'un utilisateur saisit une adresse e-mail au nom de quelqu'un d'autre - par exemple, un système CRM ou similaire - il n'est pas possible de mettre en œuvre votre solution. Dans ces cas, l'utilisateur ne saisit pas sa propre adresse e-mail, il risque donc de la mal orthographier. Si vous autorisez le collage dans la boîte de confirmation de l'e-mail, vous obtiendrez beaucoup de données incorrectes, il n'y a donc rien de mal à empêcher le collage. En tant que développeur, vous devez limiter les utilisateurs "suffisamment stupides" pour protéger les données de l'entreprise.
theyetiman

12
Il y a aussi le cas courant où le développeur qui examine cette question a peu ou pas de contrôle sur les exigences du projet sur lequel il travaille. Ce n'est pas une réponse à la question posée ici, donc -1.
Nick

4
Dire ne pas le faire ne répond pas à la question. J'ai actuellement une exigence où la pâte doit être désactivée.
Darian Everett

13
si jamais on vous donne une exigence comme celle-ci, c'est votre travail en tant que professionnel de la repousser. vous êtes plus qu'une paire de mains capables d'écrire du code.
Dan Pantry

2
Mais il y a des raisons valables pour presque tout et ne pas répondre à la question de quelqu'un parce que vous ne pensez pas que LEUR raison est valable est irritant. Disons que vous avez essayé de mettre en œuvre un quiz avec des réponses complexes. Désactiver le collage et forcer l'élève à taper la réponse entière au lieu de copier-coller les ferait enregistrer la réponse en mémoire, alors qu'un simple copier-coller serait probablement sans valeur. Il y a une raison valable de faire cela. Avertissez quelqu'un que ce qu'il essaie de faire n'est pas une bonne idée dans la plupart des cas, mais donnez une réponse ... ou il vaut mieux ne pas se donner la peine de répondre.
Demi

69

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

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

1
Fonctionne bien pour moi, les chars!
Gabriel Glauber

26

Je viens de l'obtenir, nous pouvons y parvenir en utilisant onpaste:"return false", grâce à: http://sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

Nous avons diverses autres options disponibles comme indiqué ci-dessous.

<input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/><br>

16

Vous pouvez ... mais ne le faites pas.

Vous ne devez pas modifier le comportement par défaut du navigateur d'un utilisateur. C'est vraiment une mauvaise convivialité pour votre application Web. De plus, si un utilisateur souhaite désactiver ce piratage, il peut simplement désactiver javascript sur son navigateur.

Ajoutez simplement ces attributs à la zone de texte

ondragstart=”return false onselectstart=”return false

6
la question est de désactiver le collage. cette technique ne ferait que rendre la copie difficile et n'effectuerait pas du tout le collage.
bendman

10

Idée folle: obliger l'utilisateur à vous envoyer un e-mail dans le cadre du processus d'inscription. Ce serait évidemment gênant lorsque cliquer sur un lien mailto ne fonctionne pas (s'ils utilisent le webmail, par exemple), mais je le vois comme un moyen de garantir simultanément contre les fautes de frappe et de confirmer l'adresse e-mail.

Cela ressemblerait à ceci: ils remplissent la majeure partie du formulaire, en saisissant leur nom, leur mot de passe, etc. Lorsqu'ils poussent la soumission, ils cliquent en fait sur un lien pour envoyer du courrier à votre serveur. Vous avez déjà enregistré leurs autres informations, le message inclut donc simplement un jeton indiquant à quel compte il s'agit.


Ha, c'est une bonne idée.
justinl

7

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

Quiconque ne clique pas pour confirmer la réception de l'e-mail peut avoir saisi son adresse e-mail de manière incorrecte.

Pas une solution parfaite, mais juste quelques idées.


4
J'ai cette implémentation actuellement. Le problème est que l'utilisateur pense ne pas recevoir l'e-mail en raison d'une erreur de notre part car il vérifie son adresse e-mail qu'il pense avoir saisie et qu'il n'a pas d'e-mail. Ce qui se passe également, c'est que lorsqu'ils essaient de se réinscrire, le nom d'utilisateur qu'ils ont utilisé n'est plus disponible car il est bloqué avec cette adresse e-mail incorrecte.
justinl

Tnen peut-être ajouter un flux de travail / code qui exécute le nettoyage quotidien des noms d'utilisateurs qui n'ont pas été confirmés depuis 2 jours.
Colin

1
Merci pour le commentaire. Je pense que si vous essayez de créer un compte sur un site Web et que vous dites que votre nom d'utilisateur a été pris, reviendriez-vous dans 2 jours et réessayeriez-vous? Mes pensées ne le sont probablement pas. Soit vous avez créé un nouveau compte avec un nom d'utilisateur différent le même jour, soit vous n'avez pas pris la peine de revenir sur le site car vous ne saviez pas comment vous inscrire et le site était "trop ​​compliqué".
justinl

8
Pour continuer ce que Colin dit, vous pouvez supposer que lorsque quelqu'un essaie de se réinscrire avec le même nom d'utilisateur et une adresse e-mail différente et qu'il n'a pas répondu au message de confirmation, il est probablement normal de le laisser faire. Vous constaterez peut-être que les gens obtiennent leur nom de domaine correct dans leur e-mail, mais que leur nom d'utilisateur est mal orthographié et que vous pouvez l'utiliser pour déterminer davantage quand quelqu'un a commis une erreur?
Richard Lucas

1
J'aime vraiment cette idée de permettre aux utilisateurs de se réinscrire qui n'ont pas encore confirmé leurs informations de compte. Je pense que cette solution de conception est meilleure que ma solution technique proposée initialement. Entendre tout le monde dire que changer cette fonctionnalité de navigateur par défaut était une mauvaise idée était ce que j'avais besoin d'entendre pour trouver une meilleure solution.
justinl

7

Vous pouvez utiliser jquery

Fichier HTML

<input id="email" name="email">

code jquery

$('#email').bind('copy paste', function (e) {
        e.preventDefault();
    });

6

En étendant la réponse @boycs , je recommanderais également d'utiliser "on".

$('body').on('copy paste', 'input', function (e) { e.preventDefault(); });

Cette méthode est utile si vous prévoyez d'appliquer le script à des éléments de formulaire ajoutés dynamiquement.
Matthew le

3

si vous devez utiliser 2 champs de courrier électronique et que vous craignez que l'utilisateur ne colle pas correctement le même courrier électronique mal saisi du champ 1 au champ 2, je dirais afficher une alerte (ou quelque chose de plus subtil) si l'utilisateur colle quelque chose dans le deuxième champ de courrier électronique

document.querySelector('input.email-confirm').onpaste = function(e) {
    alert('Are you sure the email you\'ve entered is correct?');
}

de cette façon, vous ne désactivez pas le collage, vous leur donnez simplement un rappel amical pour vérifier que ce qu'ils ont probablement tapé dans le premier champ, puis collé dans le deuxième champ est correct.

cependant, il suffit peut-être d'un seul champ d'e-mail avec la saisie semi-automatique activée. il y a de fortes chances qu'ils aient rempli leur e-mail correctement auparavant sur un autre site à un moment donné et le navigateur suggérera de remplir le champ avec cet e-mail

<input type="email" name="email" required autocomplete="email">

2

Vous pouvez attacher un écouteur "keydown" à la zone de saisie pour détecter si les touches Ctrl + V sont enfoncées ou non et, le cas échéant, arrêter l'événement ou définir la valeur de la zone de saisie sur ''.

Cela ne gérerait pas le clic droit et le collage ou le collage à partir du menu Edition du navigateur, cependant. Vous devrez peut-être ajouter un compteur de «dernière longueur» à l'écouteur de touches et utiliser un intervalle pour vérifier la longueur actuelle du champ pour voir si elle augmente depuis la dernière frappe.

Cependant, ni l'un ni l'autre n'est recommandé. Les champs de formulaire avec coller désactivé sont extrêmement frustrants. Je suis capable de taper correctement mon e-mail la première fois, je me réserve donc le droit de le coller dans la deuxième case.


Pas de clic droit ou même quoi que ce soit d'Apple, Unix ou Ctrl-ins, et que diriez-vous des iPhones?
Martlark

Je ne suis pas non plus un grand fan de la désactivation du champ d'entrée car je trouve cela frustrant moi-même. Mais quelles sont les autres options pour arrêter ce type d'erreur utilisateur? Ou quelle solution aboutira aux inscriptions d'utilisateurs les moins mal complétées? Il semble un peu ennuyeux de devoir taper à nouveau manuellement une adresse e-mail, mais si cela permet de sauver des clients potentiels frustrés, je préférerais forcer les utilisateurs à taper manuellement quelque chose dans un champ de saisie. Je pense que ce n'est pas un gros inconvénient et la quantité de frustration que cela pourrait éviter à quelqu'un d'une simple erreur pourrait être inquiétante. Pensées?
justinl

2

Ajoutez une deuxième étape à votre processus d'inscription. Première page comme d'habitude, mais au rechargement, affichez une deuxième page et demandez à nouveau l'e-mail. Si c'est si important, l'utilisateur peut le gérer.


1

de

Certains peuvent suggérer d'utiliser Javascript pour capturer les actions des utilisateurs, comme cliquer avec le bouton droit de la souris ou les combinaisons de touches Ctrl + C / Ctrl + V, puis arrêter l'opération. Mais ce n'est évidemment pas la solution la meilleure ou la plus simple. La solution est intégrée dans les propriétés du champ de saisie elle-même avec une capture d'événements à l'aide de Javascript.

Afin de désactiver la saisie semi-automatique des navigateurs, ajoutez simplement l'attribut dans le champ de saisie. Ça devrait ressembler a quelque chose comme ca:

<input type="text" autocomplete="off">

Et si vous voulez refuser Copier et Coller pour ce champ, ajoutez simplement l'événement Javascript capturant les appels oncopy, onpaste et oncut et faites-les retourner faux, comme ceci:

<input type="text" oncopy="return false;" onpaste="return false;" oncut="return false;">

L'étape suivante consiste à utiliser onselectstart pour refuser la sélection de contenu du champ de saisie à l'utilisateur, mais attention: cela ne fonctionne que pour Internet Explorer. Le reste de ce qui précède fonctionne très bien sur tous les principaux navigateurs: Internet Explorer, Mozilla Firefox, Apple Safari (au moins sous Windows OS) et Google Chrome.


Bien que cela puisse théoriquement répondre à la question, il serait préférable d'inclure ici les parties essentielles de la réponse et de fournir le lien pour référence.
Kev

yaah, je prendrai soin la prochaine fois
vaichidrewar

1
Pourquoi ne pas commencer maintenant par décrire ce qui est "très bien expliqué", c'est ainsi que vous obtenez des votes positifs et une meilleure représentation :)
Kev

Quelle justification peut-il y avoir pour (essayer de) désactiver la saisie semi-automatique? "Nous détestons nos utilisateurs!" ? Si vous essayez d'être l'ennemi de l'utilisateur, il vous détestera alors qu'il gagnera encore à la fin, car il contrôle le navigateur.
Jan Hertsens

1

Vérifiez la validité de l'enregistrement MX de l'hôte de l'e-mail donné. Cela peut éliminer les erreurs à droite du signe @.

Vous pouvez le faire avec un appel AJAX avant l'envoi et / ou côté serveur après l'envoi du formulaire.


1

En utilisant jquery, vous pouvez éviter le copier-coller et couper en utilisant ce

$('.textboxClass').on('copy paste cut', function(e) {
    e.preventDefault();
});

Merci. Cela a vraiment fonctionné comme il se doit.
Juergen

1

J'utilise cette solution JS vanille:

const element = document.getElementById('textfield')
element.addEventListener('paste', e =>  e.preventDefault())



0

Solution simple: inversez simplement le processus d'inscription: au lieu d'exiger une confirmation à la fin du processus d'inscription, demandez une confirmation au début de celui-ci! C'est-à-dire que le processus d'inscription a commencé avec un simple formulaire demandant l'adresse e-mail et rien d'autre. Lors de la soumission, un e-mail avec un lien vers une page de confirmation unique à l'adresse e-mail envoyée. L'utilisateur accède à cette page, puis le reste des informations pour l'enregistrement (nom d'utilisateur, nom complet, etc.) sera demandé.

C'est simple puisque le site Web n'a même pas besoin de stocker quoi que ce soit avant la confirmation, l'adresse e-mail peut être cryptée avec une clé et jointe dans le cadre de l'adresse de la page de confirmation.


0

J'ai fait quelque chose de similaire pour http://bookmarkchamp.com - là je voulais détecter quand un utilisateur copiait quelque chose dans un champ HTML. L'implémentation que j'ai proposée consistait à vérifier constamment le terrain pour voir si à un moment donné il y avait soudainement beaucoup de texte.

En d'autres termes: s'il y a quelques millisecondes, il n'y avait pas de texte, et maintenant il y a plus de 5 caractères ... alors l'utilisateur a probablement collé quelque chose dans le champ.

Si vous voulez que cela fonctionne dans Bookmarkchamp (vous devez être enregistré), collez une URL dans le champ URL (ou faites glisser et déposez une URL là-dedans).


0

La façon dont je résoudrais le problème de la confirmation d'une adresse e-mail est la suivante:

  1. Avant de passer par le processus principal - par exemple l'enregistrement de l'utilisateur - demandez-lui d'abord d'entrer son adresse e-mail.
  2. Générez un code unique et envoyez-le à cette adresse e-mail.
  3. Si l'utilisateur a entré la bonne adresse e-mail, il recevra le code.
  4. L'utilisateur doit entrer ce code avec son adresse e-mail et les autres informations requises pour pouvoir terminer l'enregistrement. - Veuillez noter que si cette fois, ils entrent une mauvaise adresse e-mail (ou un mauvais code), car elle ne correspond pas au code, l'enregistrement ne sera pas effectué et l'utilisateur en sera immédiatement informé.
  5. Si l'adresse e-mail, le code et d'autres informations d'enregistrement ont été correctement saisis, l'enregistrement est terminé et l'utilisateur peut commencer à utiliser le système immédiatement. - pas besoin de répondre à une autre adresse e-mail pour activer son compte

Pour une meilleure sécurité, le code doit avoir une durée de vie limitée et ne doit être autorisé qu'une seule fois dans le processus d'enregistrement. Aussi, afin d'éviter toute application robotique malveillante, il est préférable d'accompagner la première étape avec captcha ou un mécanisme similaire.


0

Vous pouvez désactiver l'option copier-coller par jQuery par le script ci-dessous. jQuery ("input"). attr ("onpaste", "return false;");

ou en utilisant l' attribut oppaste ci-dessous dans les champs de saisie.

onpaste = "return false;"


-1
Hope below code will work :

<!--Disable Copy And Paste-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.