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

CodeMirror: consola Javascript para tus páginas web

ByLuis

CodeMirror es una librería realizada con MochiKit que nos permite incluir una consola de Javascript en nuestras aplicaciones web. Un ejemplo perfecto para el funcionamiento es el libro de Javascript online Eloquent Javascript, el cual muestra ejemplos javascript y usa la consola para poder ejecutarlos.

codemirror.png

Nos muestra el código parseado y resaltado, además nos permite modificarlo y ejecutarlo, viendo los resultados en una ventana diferente.

Además es sencillo de utilizar:

var editor = new CodeMirror(CodeMirror.replace("inputfield"), {
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
path: "lib/codemirror/",
stylesheet: "lib/codemirror/jscolors.css"
});

CodeMirror

WireIt: librería Javascript para crear ‘cables’

ByLuis

WireIt es una librería basada en Yahoo Pipes que nos permite crear cables y conectar con ellos elementos. Sí, algo difícil de entender, pero si decimos que es perfecto para crear diagramas o si símplemente vemos la imagen, nos haremos una idea de cuál es su funcionalidad.
wireit.png
Está montada sobre Yahoo! User Interface y nos permite mover objetos, conectarlos entre sí, desconectarlos y mucho más.
WireIt
Gracias Elías por el aviso

| | |

Scrolling usando thumbnail

ByLuis

En esta entrada vamos a explicar cómo desarrollar un scrolling de texto usando para ello una miniatura del texto que se va a mostrar. Dispondremos de una capa con el texto y otra capa con la minuatura del texto, la cual remarca que parte del texto se está enseñando.

Scrolling

Este efecto ha sido testeado en IE6 y en Firefox 1.5 bajo Windows XP, en Opera es posible que no funcione debido a un bug que lleva arrastrando bastante tiempo.

Read More “Scrolling usando thumbnail”

|

Evitar el caché en las hojas de estilo

ByLuis

Algo que suele ocurrir con frecuencia es que al realizar cambios en la hoja de estilos, estos no se vean reflejados en la página por el caché del navegador.

Para evitar esto, tan solo es necesario un script que cargue los estilos y que le añada un parámetro GET que sea único para que el navegador lo entienda como un fichero nuevo. En este caso el parámetro es la fecha.

function loadStyleSheets(stylelist) {
var head = $$("head")[0];
var date = new Date();
var dateString = Date.parse(date.toString());
for(var i = 0; i < stylelist.length; i++) {
var link = document.createElement("link");
link.href="style/" + styleList[i] + "?" + dateString;
link.type = "text/css";
link.rel = "stylesheet";
head.appendChild(link);
}
}

En este caso el autor hace uso de la función de Prototype $$, pero se podría hacer sin el uso de este framework.

Como consejos sobre el mismo tema yo añadiría dos:

  • si estás trabajando en local y no ves los cambios, carga en el navegador directamente el fichero .css que hayas modificado, así los cambios aparecerán, luego los podrás ver en la página.
  • si la página se crea mediante PHP le puedes añadir a la etiqueta link el parametro GET directamente:
<link rel="stylesheet" href="estilos.css?refresh=<?php echo time(); ?>" />

How to avoid caching and dynamic load of stylesheets

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.