Interceptar evento de pegado en Javascript
¿Hay alguna manera de interceptar el evento de pegado en JavaScript y obtener el valor sin procesar, cambiarlo y establecer el valor del elemento DOM asociado como el valor modificado?
Por ejemplo, tengo un usuario tratando de copiar y pegar una cadena con espacios en ella y la longitud de la cadena excede la longitud máxima de mi cuadro de texto. Quiero interceptar el texto, eliminar los espacios y luego establecer el valor del cuadro de texto con el valor de cambio.
Es esto posible?
4 answers
Puede interceptar el evento pegar adjuntando un controlador "onpaste" y obtener el texto pegado usando "window.clipboardData.getData('Text')
" en IE o "event.clipboardData.getData('text/plain')
" en otros navegadores.
Por ejemplo:
var myElement = document.getElementById('pasteElement');
myElement.onpaste = function(e) {
var pastedText = undefined;
if (window.clipboardData && window.clipboardData.getData) { // IE
pastedText = window.clipboardData.getData('Text');
} else if (e.clipboardData && e.clipboardData.getData) {
pastedText = e.clipboardData.getData('text/plain');
}
alert(pastedText); // Process and handle text...
return false; // Prevent the default handler from running.
};
Como señala @pimvdb, necesitará usar "e.originalEvent.clipboardData
" si usa jQuery.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-05-17 18:56:33
Como sucede, respondí una pregunta similar hoy temprano. En resumen, necesita un truco para redirigir el cuadro a un área de texto fuera de la pantalla cuando se dispara el evento de pegado.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:48
$(document).ready(function() {
$("#editor").bind('paste', function (e){
$(e.target).keyup(getInput);
});
function getInput(e){
var inputText = $(e.target).val();
alert(inputText);
$(e.target).unbind('keyup');
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-04 07:40:11
Necesitaba implementar un "recorte" en lo que se pegó (eliminar todos los espacios en blanco iniciales y finales) al tiempo que permitía el uso de la barra espaciadora.
Para Ctrl + V, Mayús + Insertar y clic derecho del ratón Pegar, aquí está lo que encontré que funcionó en FF, IE11 y Chrome a partir de 2017-04-22:
$(document).ready(function() {
var lastKeyCode = 0;
$('input[type="text"]').bind('keydown', function(e) {
lastKeyCode = e.keyCode;
});
// Bind on the input having changed. As long as the previous character
// was not a space, BS or Del, trim the input.
$('input[type="text"]').bind('input', function(e) {
if(lastKeyCode != 32 && lastKeyCode != 8 && lastKeyCode != 46) {
$(this).val($(this).val().replace(/^\s+|\s+$/g, ''));
}
});
});
Dos advertencias:
Si ya hay texto cuando se produce el pegado, el recorte se produce en todo el resultado, no solo en lo que se pega.
Si el usuario escribe espacio o BS o Del y luego se pega, el recorte no se producirá.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-22 17:42:26