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 d'un formulaire HTML?
Par exemple. J'ai un simple formulaire d'inscription dans lequel l'utilisateur doit saisir son courrier électronique deux fois. La deuxième entrée de courrier électronique sert à 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 courrier électronique, cela va à l'encontre de l'objectif recherché et j'ai rencontré des utilisateurs qui rencontraient des problèmes parce qu'ils avaient saisi le mauvais email et l'avaient copié/collé.
Peut-être que ma question n'était pas claire, mais je n'essaie pas d'empêcher les gens de copier (ou de faire glisser une sélection) du texte dans leur navigateur. Je veux juste les empêcher de coller entrer dans un champ de texte pour minimiser les erreurs de l'utilisateur.
Peut-être qu'au lieu d'utiliser ce "bidouillage", vous pouvez suggérer une autre solution au problème fondamental de ce que j'essaie de résoudre ici? J'ai fait moins d'une demi-douzaine de tests utilisateur et cela s'est déjà produit deux fois. Mon public n’a pas un niveau élevé de maîtrise de l’informatique.
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 multi-navigateur * 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 je suis venu avec. Il ne désactive pas complètement le collage (l'utilisateur peut coller un seul caractère à la fois, par exemple), mais il répond à mes besoins et évite d'avoir à gérer des codes de clé, 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 qu’en entrée ne fait pas partie des spécifications DOM du W3C, mais tous les navigateurs avec lesquels j'ai testé ce code - Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7 - prend en charge oninput ou onpaste. Parmi 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 utilisant 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 une personne disposant d'un clavier à l'écran et Opera (par exemple: Nintendo Wii, certains téléphones mobiles)), n'utilisez ce script que si vous en avez un. testé pour vous assurer que le clavier à l'écran envoie les touches au navigateur après chaque sélection.
Ne le fais pas. Ne plaisante 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 erronée (cela m'est arrivé), alors c'est leur propre faute.
Si vous voulez vous assurer que la confirmation de courrier électronique fonctionne, demandez à l'utilisateur de vérifier son courrier électronique pendant que votre site est en attente ("Veuillez ouvrir votre programme de messagerie Web dans une nouvelle fenêtre"). Affichez l’adresse électronique en grosses lettres ("L’envoi de confirmation a été envoyé à .... fait une erreur? Cliquez ici pour changer).
Mieux encore, si vous le pouvez, laissez l’utilisateur un accès limité sans confirmation. Ainsi, ils peuvent 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).
Ajoutez une classe de 'disablecopypaste' aux entrées pour lesquelles vous souhaitez désactiver la fonctionnalité copier/coller, puis ajoutez ce script jQuery.
$(document).ready(function () {
$('input.disablecopypaste').bind('copy paste', function (e) {
e.preventDefault();
});
});
Nous venons de le recevoir, nous pouvons y arriver 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 énumérées 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 des utilisateurs. C'est vraiment une mauvaise utilisation pour votre application web. De plus, si un utilisateur veut désactiver ce hack, 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: demander à l'utilisateur de vous envoyer un email dans le cadre du processus d'inscription. Cela serait évidemment gênant lorsque le fait de cliquer sur un lien mailto ne fonctionne pas (s’ils utilisent la messagerie Web, par exemple), mais je le vois comme un moyen de garantir simultanément les fautes de frappe et de confirmer l’adresse électronique.
Cela ressemblerait à ceci: ils remplissent la majeure partie du formulaire, en entrant leur nom, leur mot de passe, etc. En fait, ils cliquent sur un lien pour envoyer un courrier électronique à votre serveur. Vous avez déjà enregistré leurs autres informations, le message inclut donc simplement un jeton indiquant le compte auquel il est destiné.
Pourquoi ne pas envoyer un e-mail de confirmation à l'adresse e-mail que l'utilisateur vient de saisir, contenant un lien vers une URL de confirmation sur votre site, alors vous savez qu'il a reçu le message?
Toute personne qui ne clique pas pour confirmer la réception du courrier électronique a peut-être mal saisi son adresse électronique.
Pas une solution parfaite, mais juste quelques idées.
Vous pouvez utiliser jQuery
fichier HTML
<input id="email" name="email">
code de requête
$('#email').bind('copy paste', function (e) {
e.preventDefault();
});
Étendre la réponse @ boycs , je recommanderais également d'utiliser "on".
$('body').on('copy paste', 'input', function (e) { e.preventDefault(); });
si vous devez utiliser deux champs de courrier électronique et que vous craignez que l'utilisateur ne colle pas correctement le même courrier électronique saisi du champ 1 au champ 2, alors je dirais de montrer 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 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 de courrier électronique avec la saisie semi-automatique. les chances sont qu'ils ont déjà rempli leur email correctement auparavant sur un autre site et le navigateur suggérera de remplir le champ avec cet email
<input type="email" name="email" required autocomplete="email">
Vous pouvez associer un écouteur "keydown" à la zone de saisie pour détecter si les touches Ctrl + V sont enfoncées 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 un clic droit et coller ou coller dans le menu Edition du navigateur, cependant. Vous devrez peut-être ajouter un compteur "dernière longueur" à l'écouteur à la touche et utiliser un intervalle pour vérifier la longueur actuelle du champ afin de voir s'il augmente depuis la dernière frappe.
Ni est recommandé, cependant. Les champs de formulaire avec collage désactivé sont extrêmement frustrants. Je suis capable de taper correctement mon email 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 lors du rechargement, affichez une deuxième page et redemandez le courrier électronique. Si c'est important, l'utilisateur peut le gérer.
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/
Vérifier 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 de le soumettre et/ou côté serveur après la soumission du formulaire.
J'utilise cette solution Vanilla JS:
const element = document.getElementById('textfield')
element.addEventListener('paste', e => e.preventDefault())
Certains peuvent suggérer d'utiliser Javascript pour capturer les actions des utilisateurs, comme un clic droit de la souris ou les combinaisons de touches Ctrl + C/Ctrl + V, puis l'arrêt de 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 avec une capture d’événement à l’aide de Javascript.
Pour désactiver la complétion automatique des navigateurs, ajoutez simplement l'attribut au champ de saisie. Ça devrait ressembler a quelque chose comme ca:
<input type="text" autocomplete="off">
Et si vous souhaitez refuser les fonctions Copier et Coller pour ce champ, ajoutez simplement l'événement Javascript qui capture les appels oncopy, onpaste et oncut et faites-les renvoyer false, comme suit:
<input type="text" oncopy="return false;" onpaste="return false;" oncut="return false;">
La prochaine étape consiste à utiliser onselectstart pour refuser la sélection du 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 (sous Windows, au moins)) et Google Chrome.
Solution simple: il suffit d'inverser le processus d'inscription: au lieu de demander une confirmation à la fin du processus d'inscription, demandez une confirmation au début! C'est à dire. 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 pour l'adresse e-mail envoyée. L'utilisateur accède à cette page, puis le reste des informations relatives à 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 à l’adresse de la page de confirmation.
En utilisant jquery, vous pouvez éviter de copier coller et couper en utilisant ceci
$('.textboxClass').on('copy paste cut', function(e) {
e.preventDefault();
});
Voici comment résoudre le problème de la confirmation d'une adresse électronique:
- Avant de passer par le processus principal - disons l'enregistrement de l'utilisateur - demandez-lui d'abord d'entrer son adresse électronique.
- Générez un code unique et envoyez-le à cette adresse électronique.
- Si l'utilisateur a entré l'adresse e-mail correcte, il recevra le code.
- L'utilisateur doit entrer ce code avec son adresse e-mail et les autres informations requises pour pouvoir s'inscrire. - Veuillez noter que si cette fois-ci, ils saisissent une adresse électronique erronée (ou un code erroné), car ils ne correspondront pas au code, l'enregistrement ne sera pas transmis et l'utilisateur en sera immédiatement informé.
- Si l'adresse électronique, le code et d'autres informations d'enregistrement ont été saisis correctement, l'enregistrement est terminé et l'utilisateur peut commencer à utiliser le système immédiatement. - pas besoin de répondre à une autre adresse email pour activer son compte
Pour une meilleure sécurité, le code devrait avoir une durée de vie limitée et ne devrait être autorisé qu'une seule fois dans le processus d'enregistrement. De plus, afin d’empêcher toute application robotique malveillante, il est préférable d’accompagner la première étape avec captcha ou un mécanisme similaire.
J'ai fait quelque chose de semblable à ceci pour http://bookmarkchamp.com - je voulais détecter le moment où un utilisateur copiait quelque chose dans un champ HTML. L’implémentation que j’ai proposée consistait à vérifier le champ de façon constante pour voir s’il y avait soudainement beaucoup de texte.
En d’autres termes: s’il ya une fois, il n’y avait pas de texte et qu’il y avait plus de 5 caractères, il y avait bien plus de 5 caractères ... alors l’utilisateur avait 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 une URL à l'intérieur).
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 aussi lire les 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