Désactiver coller du texte dans formulaire HTML

J'ai récemment eu à contrecœur désactiver le copier-coller d'un élément de formulaire. Pour ce faire, j'ai écrit un cross-browser* mise en place d'Internet Explorer (et d'autres) onpaste gestionnaire d'événement. Ma solution a dû être indépendant de tout tiers bibliothèques JavaScript.

Voici ce que j'ai trouvé. Il n'est pas complètement désactiver le collage (l'utilisateur peut coller un seul caractère à la fois, par exemple), mais il répond à mes besoins et évite d'avoir à traiter avec les codes de touches, 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);
}
}
}
}
})();

À faire usage de ce pour désactiver le collage:

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

---

* Je sais oninput ne fait pas partie du DOM du W3C spec, mais tous les navigateurs que j'ai testé ce code avec Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7—soutien oninput ou onpaste. De tous ces navigateurs, seulement à l'Opéra, ne prend pas en charge onpaste, mais il prend en charge oninput.

Remarque: Cela ne fonctionne pas sur une console ou d'un autre système qui utilise un clavier à l'écran (en supposant que le clavier à l'écran ne pas envoyer les clés pour le navigateur lors de chaque touche est sélectionnée). Si il est possible que la page/l'application peut être utilisée par quelqu'un avec un clavier à l'écran et de l'Opéra (par exemple: Nintendo Wii, certains téléphones mobiles), ne pas utiliser ce script, sauf si vous avez testé pour vous assurer que le clavier à l'écran envoie les clés pour le navigateur après chaque touche de sélection.

Ajouter une classe de "disablecopypaste" pour les entrées que vous souhaitez désactiver le copier coller et ajouter ce script jQuery

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

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

Vous ne devez pas modifier le comportement par défaut d'un navigateur d'utilisateurs. C'est vraiment mauvaise utilisabilité de votre application web. Aussi, si un utilisateur souhaite désactiver ce hack, puis il suffit de désactiver le javascript sur leur navigateur.

Juste ajouter ces attributs dans la zone de texte

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

Comment sur l'envoi d'un e-mail de confirmation à l'adresse email que l'utilisateur a entré deux fois dans lequel il y a un lien vers une URL de confirmation sur votre site, alors vous savez qu'ils ont reçu le message?

Quelqu'un qui n'a pas de cliquez pour confirmer la réception de l'e-mail peut avoir entré son adresse email incorrecte.

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

Vous pouvez utiliser jquery

Fichier HTML

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

jquery code

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

Vous pouvez attacher un "keydown" auditeur à la zone de saisie pour détecter si oui ou non les touches Ctrl + V pressée et, le cas échéant, d'arrêter la manifestation ou de l'ensemble de la zone de saisie de la valeur ".

Qui ne serait pas gérer un clic droit et coller ou coller dans le menu Edition de l'navigateur, cependant. Vous devrez peut-être ajouter une "dernière longueur" à l'encontre des keydown auditeur et l'utilisation d'un intervalle de vérifier le champ actuel de la longueur pour voir si il augmenter depuis la dernière touche.

Ni est recommandée, bien que. Les champs de formulaire avec de la pâte handicapés sont extrêmement frustrant. Je suis capable de taper mon e-mail correctement la première fois, donc je me réserve le droit de le coller dans la deuxième case.

à partir de

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

Pour désactivé les navigateurs de saisie semi-automatique, il suffit d'ajouter l'attribut dans le champ de saisie. Il devrait ressembler à quelque chose comme ceci:

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

Et si vous souhaitez refuser les Copier et de les Coller pour ce champ, il suffit d'ajouter le code Javascript de l'événement de la capture des appels oncopy, onpaste, et oncut et les faire revenir faux, comme suit:

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

L'étape suivante est d'utiliser onselectstart de refuser l'entrée du champ de la sélection du contenu de l'utilisateur, mais attention: cela ne fonctionne que pour Internet Explorer. Le reste du travail ci-dessus sur tous les principaux navigateurs: Internet Explorer, Mozilla Firefox, Apple Safari (sur Windows OS, au moins) et Google Chrome.

- Je utiliser ce vanilla JS solution:

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

que sur l'utilisation de CSS sur UIWebView? quelque chose comme

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

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

J'ai fait quelque chose de similaire à ce pour http://bookmarkchamp.com - là j'ai voulu détecter lorsqu'un utilisateur copié quelque chose dans un champ HTML. La mise en œuvre, je suis venu avec était de vérifier le domaine sans cesse pour voir si à tout moment il était tout à coup un tas de texte là.

En d'autres termes: si une fois milisecond auparavant il n'y avait pas de texte, et il y a maintenant plus de 5 caractères... alors l'utilisateur a probablement collé quelque chose dans le domaine.

Si vous voulez voir ce travail en Bookmarkchamp (vous devez être inscrit), coller une URL dans le champ URL (ou faire glisser et déposer une URL en y).

À l'aide de jquery, vous pouvez éviter le copier-coller et le couper à l'aide de cette

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