Désactiver le collage de texte dans un formulaire HTML

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.

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é.

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).

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

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>

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”

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.

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.

Vous pouvez utiliser jquery

Fichier HTML

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

code jquery

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

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

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

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

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.

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.

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.

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.

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

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

J'utilise cette solution JS vanille:

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

Avec Jquery, vous pouvez le faire avec une simple ligne de code.

HTML:

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

Code:

$(email).on('paste', false);

JSfiddle: https://jsfiddle.net/ZjR9P/2/

qu'en est-il de l'utilisation de CSS sur UIWebView? quelque chose comme

<style type="text/css">
<!—-
    * {
        -webkit-user-select: none;
    }
-->
</style>

vous pouvez également lire des détails sur le copier-coller de bloc en utilisant CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

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.

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).

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.

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

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>