Deshabilitar pegado especial con teclas con JS

Landa11 · #1 (**permalink**) 25/04/2014, 16:38

Hola EXPERTOS! mi pregunta es la siguiente (soy nuevo en JS):

Tengo un input type text en donde tengo que agregar unas cantidades pero quiero deshabilitar el pegado con los event key (Ctrl + V // Shift + Insert) por que ya tengo bloqueado el del ratón.

No he podido encontrar algun ejemplo para guiarme de ahí y no he programado muchas cosas en JS o casi nada y me gustaría saber si me pueden ayudar.

Muchas gracias.

Alexis88 · #2 (**permalink**) 25/04/2014, 17:06

Utiliza el evento onpaste y evita el pegado del contenido con el método preventDefault.

Saludos

Landa11 · #3 (**permalink**) 25/04/2014, 17:13

Creo que me acabas de hacer el día amigo... Llevo todo el día buscando una solución y no me sale nada

MUCHAS GRACIAS!!!!!!

Landa11 · #4 (**permalink**) 25/04/2014, 17:15

Una pregunta, esto funciona en todos los navegadores? Y deja le doy una leída al método preventdefault y al evento que marcas.

Alexis88 · #5 (**permalink**) 25/04/2014, 17:28

Técnicamente, esto funciona en todos los navegadores modernos y en algunas viejas versiones, sin embargo, si quieres que funcione incluso en versiones de IE inferiores a la 9 que es en donde IE se empieza a poner decente, hazlo así:

Código Javascript:

Ver originalinput.onpaste = function(){
    return false;
};

Lo he probado en Chrome, Opera, Firefox, Safari y en IE 8. En todos va bien.

Saludos

Alexis88 · #6 (**permalink**) 25/04/2014, 17:36

Y si quisieras que esto surta efecto en todos los elementos del documento en los que se les puede pegar contenido, aplica esta función:

Código Javascript:

Ver originalArray.prototype.forEach.call(document.getElementsByTagName("*"), function(elemento){
    elemento.addEventListener("paste", function(e){
        e.preventDefault();
    }, false);
});

De este modo, no se podrá pegar contenido alguno en ningún elemento del documento.

Landa11 · #7 (**permalink**) 26/04/2014, 07:42

Gracias por tu aporte Alexis88, voy a probar las opciones que me han dado para ver cual se adapta mejor a mi código.

Cualquier duda lo posteo y espero me puedas seguir guiando en este asunto tan complicado de JS!

Landa11 · #8 (**permalink**) 26/04/2014, 08:34

mmmmm sigo teniendo problemas por que si me deja pegar... estoy utilizando varios scripts pero algunos son para deshabilitar el botón del ratón o para validar sólo números al momento de escribir

Código Javascript:

Ver original<!--Deshabilitar tecla enter para envio de formulario erroneo
    Se agrega el onkeydown="return intro(event) a cada input"-->
<script language="javascript"> 
function intro(e) 
{
    tecla = (document.all) ? e.keyCode : e.which; 
    if (tecla==13)
    {
        return false; 
    }
} 
</script>

Código Javascript:

Ver original<!--Script para validar campo solo numerico-->
<script language="javascript">
function soloLetras(e) {
    key = e.keyCode || e.which;
    tecla = String.fromCharCode(key).toLowerCase();
    letras = "0123456789";
    especiales = [8, 17, 18, 19, 37, 39, 45, 46, ];
 
    tecla_especial = false
    for(var i in especiales) {
        if(key == especiales[i]) {
            tecla_especial = true;
            break;
        }
    }
 
    if(letras.indexOf(tecla) == -1 && !tecla_especial)
        return false;
}
 
function limpia() {
    var val = document.getElementById("cantidad").value;
    var tam = val.length;
    for(i = 0; i < tam; i++) {
        if(!isNaN(val[i]))
            document.getElementById("cantidad").value = '';
    }
}
</script>

Código Javascript:

Ver original<!--Deshabilitar boton derecho de rat�n-->
 
<script language="javascript">
document.oncontextmenu = function()
{
    return false
}
</script>
 
<body>
<script language="javascript">
var input = document.getElementsByTagName("input")[0];
 
input.addEventListener("paste", function(e){
    e.preventDefault();
}, false);
</script>

Landa11 · #9 (**permalink**) 26/04/2014, 08:35

Ah y este es mi input en donde necesito que no haga el pegado

Código HTML:

Ver original<td><input type="text" onkeypress="return soloLetras(event)"  id="cantidad" name="cantidad" size="3" maxlength="3" autofocus/></td>

rmaeloy · #10 (**permalink**) 26/04/2014, 09:12

Pues yo no pude encontrar una forma efectiva de realizar eso y que funcione correctamente en todos los navegadores, así que termine haciendo lo de validad el contenido del input, no solo al momento de escribir, sino también cuando voy a enviar los datos, así si alguien pega una letra en un campo donde solo deberían ir números, pues le marco el error y cancelo el envió de la información.

Alexis88 · #11 (**permalink**) 26/04/2014, 09:50

Probablemente no estés tomando correctamente al <input>, por eso no surte efecto la función. En lugar de tomarlo por el nombre del elemento, hazlo por su id.

Código Javascript:

Ver originalvar input = document.getElementById("cantidad");
 
input.addEventListener("paste", function(e){
    e.preventDefault();
}, false);

Asegúrate de que el código JavaScript esté justo antes de la etiqueta </body> para que surta efecto.

Saludos

Landa11 · #12 (**permalink**) 26/04/2014, 10:21

Si las genero sobre el <head> pero además me faltó comentar que me sale un error de guardado del UTF-8 aunque ya agregué las etiquetas

Código HTML:

Ver original<meta charset="utf-8" charset="iso-8859-1" content="" http-equiv="content-type">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Ya sólo falta el arrastre de las letras y pegarlas en el texto (que no lo haga) y lo de las teclas Shift + Insert

Una vez más, gracias por el apoyo y la ayuda en este tema (Soy malo para JS!)

Alexis88 · #13 (**permalink**) 26/04/2014, 10:32

¿No te bastó con la cancelación del evento paste que te mostré al inicio? A mi me sirvió, pues no permite pegar contenido por ningún medio.

Landa11 · #14 (**permalink**) 26/04/2014, 10:34

Ah jejeje es que aún no lo he implementado completo pero si se puede pues quiero bloquear todos los posibles PASTE que se puedan hacer