2012-05-31 22 views
23

¿Cómo puedo manejar la pasta seleccionada haciendo clic derecho en javascript? Intenté con el evento "onpaste" y todos los demás eventos html disponibles pero nada funciona.Pegar evento en Javascript

+0

¿Has probado las soluciones sugeridas? –

Respuesta

2

El evento no está expuesto de forma predeterminada como "onpaste" IIRC. Puede hacerlo simplemente en jQuery mediante la emisión de

jQuery(document).bind('paste', function(e){ alert('paste event caught') }); 
+0

El evento de pegado se captura pero el contenido no se puede leer de esta forma, como puede hacer "document.addEventListener". –

29

El evento onpaste debería funcionar en todos los navegadores modernos (UPD Incluyendo Opera> = 12.10).

enlazarlo en jQuery así:

$('#txt').on('paste', function() {console.log('text pasted!')})​ 

Aquí está un ejemplo vivo: http://jsfiddle.net/7N6Xq/

En JavaScript puro se vería algo como esto para los navegadores modernos

elem.addEventListener ("paste", handler, false); // all browsers and IE9+ 

y para versiones anteriores de IE:

elem.attachEvent ("onpaste", handler); // IE<9 

También se pueden combinar con oninput y otros eventos ( cambio, propertyChange, dragdrop, etc.) para crear un seguimiento relativamente a prueba de balas de cambio de contenido.


Notas al pie:

Opera apoya API portapapeles partir de Presto/2.10.286 que corresponde a 12,10 como se sugiere here. Blink versions de Opera (a partir de 15) también debería ser compatible, pero no puedo probarlo ya que todavía no hay una versión de Linux.

1

Me sorprendió que la pregunta # 4532473 se cerrara sin respuesta sobre lo que sucedería si desea capturar el evento de pasta de postproceso. Como este es probablemente el problema, la mitad de los casos, un enfoque posible en firefox (probado) es registrar un evento oninput dentro del controlador onpaste y eliminar el controlador oninput tan pronto como se termine de ejecutar.

Es decir, se debe utilizar el cambio de propiedad en vez de la entrada. (No probado)

+0

Para aquellos interesados, una implementación simple de una [afterpaste] (http://css-tricks.com/snippets/jquery/paste-events/) – PixnBits

1

solución JS puro Niza (conforme a lo solicitado ...) está disponible on the Mozilla dev site

<!DOCTYPE html> 
<html> 
<head> 
<title>onpaste event example</title> 
</head> 

<body> 
<h1>Play with this editor!</h1> 
<textarea id="editor" rows="3" cols="80"> 
Try pasting text into this area! 
</textarea> 

<script> 
function log(txt) { 
    document.getElementById("log").appendChild(document.createTextNode(txt + "\n")); 
} 

function pasteIntercept(evt) { 
    log("Pasting!"); 
} 

document.getElementById("editor").addEventListener("paste", pasteIntercept, false); 
</script> 

<h2>Log</h2> 
<textarea rows="15" cols="80" id="log" readonly="true"></textarea> 
</body> 
</html> 
Cuestiones relacionadas