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