Javascript onpaste

Question

tengo esto ahora:

<input type="text" placeholder="Paste text" onPaste="alert(this.value);">

Esto hace de hecho el trabajo, con la excepción, devuelve una ventana de alerta en blanco. No tengo ningún valor. ¿Ayuda?

Answer 1

El evento onpaste se desencadena antes de que cambie value. Es necesario algo como un setTimeout:

<input type="text" placeholder="Paste text" onPaste="var e=this; setTimeout(function(){alert(e.value);}, 4);">​ 

Estoy almacenando una referencia a this dentro de una var global como this no es accesible dentro del ámbito de una función de tiempo de espera que se adjunta al objeto de ventana.

Estoy usando 4 milisegundos como tiempo de espera, ya que es el mínimo intervalo/tiempo de espera válido en la especificación HTML5. Editar: Como se indicó en los comentarios, también puede usar 0 milisegundos como timeOut, que se vuelve a calcular automáticamente en 4. jsPerf tests.

Fiddle

Es posible también utilizar una llamada de función dentro de su onpaste paso de eventos this como un parámetro para evitar su mezcla con HTML JS demasiado. :)

Y aquí es una función fácil de leer y que se puede utilizar en múltiples entradas:

function pasted(element) { 
    setTimeout(function(){ 
     alert(element.value); 
    }, 0); //or 4 
}​ 

que puede ser llamado simplemente con onPaste="pasted(this)" para cualquier entrada.

Fiddle

Answer 2

Esto es porque el onpaste desencadena el evento antes el contenido que se pegan en el elemento (link) así que no es todavía en el momento que lo maneja.

Los navegadores modernos admiten métodos para obtener datos del portapapeles dentro del controlador de eventos. Consulte JavaScript get clipboard data on paste event (Cross browser) para los intentos de solución entre navegadores.

Además, siempre puede evitar su problema simplemente iniciando un temporizador en la función del controlador de eventos (10ms debería ser suficiente) que verificaría su valor de entrada más tarde.