Detectar copiar, pegar y cortar en una caja de texto con jQuery

ByLuis

Algo sencillo que no conocía y que nos permite detectar cuando se copia, corta y pega en cajas de texto usando jQuery.

$(document).ready(function() {
$("input:text").bind('copy', function(e) {
alert('Copiando...');
});
$("input:text").bind('paste', function(e) {
alert('Pegando...');
});
$("input:text").bind('cut', function(e) {
alert('Cortando...');
});
});

Detect Copy, Paste and Cut operations on a TextBox using jQuery

Vía / Script & Style

Similar Posts

Javascript debuggers

ByLuis

Todos nos hemos encontrado con errores de javascript y normalmente la única información que obtenemos es el número de línea en el que se da el error, y a veces ni es esa línea (por ejemplo el famoso error en la línea 1 de IE). Por eso no nos viene mal tener una aplicación que nos ayude a limpiar nuestro código de errores:

  • Microsoft Script Debugger: Para IE, permite controlar el flujo de la ejecución del script y modificar el valor de variables entre otras cosas. No lo he usado, pero creo que es el que tienen algunos compañeros míos instalado, y te sustituye el icono amarillo de error y te salta cada vez que hay un error de Javascript, lo cual puede ser muy molesto.
  • SplineTech JavaScript HTML Debugger: Para IE y comercial, parece bastante completo, salvo que debes ejecutar la página web en la aplicación, no se integra con el explorador, lo cual suele ser una ayuda.
  • Venkman JavaScript Debugger: Para Mozilla y Firefox, uno de los primeros que aparecieron.
  • Firebug: Para Firefox, sin duda para mí el mejor de todos, lo que más me llega a gustar es su consola y la posibilidad de poder lanzar trazas en ella.
  • JSLint: Para IE, Mozilla y Firefox.
  • InspectThis: Para Firefox.
  • Drosera: Para Safari, el único problema es que está escrito el 90% en HTML y Javascript.

Javascript debuggers overview

Vía / dzone

| | | |

Nueva versión de FireBug

ByLuis

firebug2.pngYa hablamos en su día de FireBug, una extensión que nos permite depurar nuestras aplicaciones web. La nueva versión tiene una gran novedad, “debuguear” Javascript. Ahora es posible poner puntos de ruptura, ejecutar el código paso a paso, inspeccionar variables, comprobar código, … Si antes ya era indispensable, ahora es totalmente obligatorio para cualquier desarrollador (vale, quizás me he pasado). A parte de el debugger hay otra serie de cambios que no dejan de tener importancia.
FireBug
Vía / SitePoint

|

PHP.JS: usar Javaqscript con nomenclatura PHP

ByLuis

PHP.JS es un script que quiere mover las funciones PHP a Javascript, para que el desarrollador use la misma nomenclatura, ya que hay funciones muy similares y que para desarrolladores poco experimentados puede resultarles confuso.
Yo recomiendo que la gente aprenda ambos lenguajes y que los sepa diferenciar, pero ante la confusión de lenguajes puedes echar mano a este script, aunque de rendimiento puede ir peor.
Entre las funciones nos encontramos las que tratan los arrays, strings, UTF-8, entre otras.
PHP.JS
Vía / dzone

Añadir contenido a los datepicker de jQuery UI

ByLuis

En algunas ocasiones es necesario añadir contenido al calendario que te ofrecer el datepicker de jQuery UI, por ejemplo añadir un combo que indice “horario mañanas/tarde”. Para conseguirlo será necesario ‘toquetear’ un poco el objeto jQuery.datepicker.

Tendremos que hacer dos cosas: primero deberemos evitar que cuando se selecciona un día se cierre automáticamente el popup con el calendario y después tendremos que modificar el HTML que devuelve la clase.

Para evitar el auto-cierre tenemos que añadir la opción showButtonPanel ya que nos ofrecerá el botón “Close” que nos permitirá cerrar el popup cuando hayamos indicado todos los campos necesarios. También es necesario modificar la función jQuery.datepicker._selectDate tal y como lo indican en StackOverflow:

// Añadimos datepicker al input que queremos
jQuery('.fecha')
  .datepicker({
    showButtonPanel: true,
    dateFormat: "DD, d MM, yy" 
  });

// Modificamos la funcion _selectDate
jQuery.datepicker._selectDateOverload = jQuery.datepicker._selectDate;
jQuery.datepicker._selectDate = function(id, dateStr) {
    var target = jQuery(id);
    var inst = this._getInst(target[0]);
    inst.inline = true;
    jQuery.datepicker._selectDateOverload(id, dateStr);
    inst.inline = false;
    this._updateDatepicker(inst);
    // Usar el .html() para luego usar el .text() es porque si usas el regional de datepicker, te salen entidades html en vez de letras acentuadas
    // Se le añade el valor del nuevo campo select que hemos incluido
    target.val(jQuery('
').html(dateStr).text()+' @ '+jQuery('#horario').val());
}

Bien, ya tenemos el evento onSelect modificado, ahora nos falta cambiar el HTML que se dibuja, para ello modificaremos la función jQuery.datepicker._generateHTML:

jQuery.datepicker._generateHTMLExtended = jQuery.datepicker._generateHTML;
jQuery.datepicker._generateHTML = function(inst) {
  var html = jQuery.datepicker._generateHTMLExtended(inst);
  var div = jQuery('
').html(html);
  div.find('table:first').after('
Horario:
');
  return div.html();
}

// Incluimos tambien un evento para que cuando se seleccione el horario, se modifique el campo input
jQuery('#horario').live('change', function() {
  var $obj = jQuery('.fecha');
  $obj.val($obj.val().replace(/@.*/, '@ '+jQuery(this).val()));
});

Lista de ofuscadores para Javascript

ByLuis

Para aquellos que necesiten ofuscar su código Javascript para que sea más difícil de entender a los usuarios, les vendrá bastante bien esta lista de aplicaciones que modificarán nuestro código:

Vía / Ajax Digest

One Comment

  1. Hola, me ha servido mucho tu publicación, pero tengo una duda, como evito que un usuario, arrastre y coloque un texto desde alguna parte del sitio o inclusive de un texto en word o en otro programa?

Comments are closed.