| |

Laboratorio: shortcuts en formularios

ByLuis

Algo a lo que suelo estar acostumbrado es a usar el teclado para realizar ciertas acciones (shortcuts), cuando estás 8 horas diarias delante de un ordenador, si no haces uso de los shortcuts, perderás mucho tiempo moviendo el ratón de un lado para otro.

Antes el uso estaba más restringido a las aplicaciones de escritorio (CTRL + S para guardar el documento, ALT + F4 para cerrar la ventana, …), pero ahora que cada vez se usa con más frecuencia aplicaciones web, se echan en falta estas facilidades. Aunque hay que decir que últimamente se ven con más frecuencia: TAB + INTRO para enviar un correo en GMail (claro que esta no se programa), CONTROL + S para guardar una entrada en Blogger, …

El desarrollo para esta funcionalidad es bastante sencillo, se trata de capturar el evento del teclado en el elemento HTML que deseemos, en nuestro caso en un textarea para escribir entradas en un blog (por ejemplo).

Tampoco es tan sencillo como capturar el evento del teclado, hay que capturar realmente el evento de “apretar” una tecla (onkeydown), para evitar que se realice la acción por defecto cuando “soltamos” la tecla (onkeyup).

Otra dificultad a la que nos enfrentamos es la de evitar que cierto juego de teclas ejecuten la acción predeterminada por el navegador. Por ejemplo, en Firefox, si pulso CTRL + S me querrá guardar la página como un HTML en mi disco duro, cuando yo lo que quiero es enviar el formulario al servidor para guardarlo. Para evitar el comportamiento por defecto, hay que “anular” los eventos en el elemento body.

Los eventos yo prefiero manejarlos llamando dentro del evento en la etiqueta HTML, pasándole como parámetro el objeto event:

<textarea onkeydown="shortcut(event)" ... ></textarea>

El objeto event solo existe en IE (para variar), en Firefox, se pasa el evento como primer parámetro de la función, por lo cual en firefox, al no existir event, se le pasa automáticamente el objeto evento (en este caso KeyboardEvent), así nos ahorramos el trabajo de ir preguntando que tipo de navegador es y tener que buscar el objeto event. Una vez ya tenemos en nuestro poder el objeto evento, para acceder a la tecla pulsada, solo tenemos que recuperar el valor de keyCode, que nos dará un número que representa la tecla pulsada, para saber si está pulsada la tecla control o alt, solo tendremos que chequear el valor de ctrlKey y altKey. Para saber el valor de las teclas que queremos capturar, os recomiendo que useis un alert y vayáis apuntando los números que os salen cuando pulsáis las teclas.

Para cancelar el evento y que no siga con lo predeterminado, hay que usar el siguiente código, el cual sirve para IE y para Firefox, aunque creo que ninguno de los dos es estándar:

evt.cancelBubble = true;
// Para Firefox
if (evt.stopPropagation) {
evt.preventDefault();
}

En el ejemplo que os voy a pasar, he capturado CONTROL+S para guardar el documento y CONTROL+B para poner en negrita el texto seleccionado dentro del textarea. Para obtener el texto seleccionado, es necesario el siguiente código (incluyo el añadir la etiqueta que deseamos):

if (obj.createTextRange) { // IE
var r = document.selection.createRange();
texto = r.text;
r.text = '<'+etiqueta+'>'+texto+'</'+etiqueta+'>'
} else if (obj.setSelectionRange) { // Firefox
// Posicion inicial en el string del texto seleccionado
var ini = obj.selectionStart;
// Posicion final en el string del texto seleccionado
var fin = obj.selectionEnd;
// Obtengo el substring
obj.value = obj.value.substring(0, ini)+'<'+etiqueta+'>'+obj.value.substring(ini, fin)+'</'+etiqueta+'>'+obj.value.substring(fin);
// Selecciono lo que estaba seleccionado anteriormente más las etiquetas
obj.selectionStart = fin+5+(etiqueta.length*2);
obj.selectionEnd = fin+5+(etiqueta.length*2);
}

El código necesario para realizar los shortcuts sería el siguiente:

<script type="text/javascript">
// Controla la pulsación de teclas
function shortcut(evt) {
if (evt.keyCode == 83 && evt.ctrlKey) { // CONTROL+S
// Simulacion de guardado
setTimeout('alert("GUARDADO")', 1000);
} else if (evt.keyCode == 66 && evt.ctrlKey) { // CONTROL+B
modificaTextoSeleccionado(document.getElementById("caja-texto"), 'strong');
return false;
} else {
return true;
}
}
// Se cancela los eventos que se producen
function evitaEvento(evt) {
if (evt.ctrlKey) { // CONTROL+S
evt.cancelBubble = true;
// Para Firefox
if (evt.stopPropagation) {
evt.preventDefault();
}
}
}
// Obtiene el texto seleccionado y se encierra entre etiquetas
function modificaTextoSeleccionado(obj, etiqueta) {
var texto = "";
if (obj.createTextRange) {  // IE
var r = document.selection.createRange();
texto = r.text;
r.text = '<'+etiqueta+'>'+texto+'</'+etiqueta+'>'
} else if (obj.setSelectionRange) {  // Firefox
// Posicion inicial en el string del texto seleccionado
var ini = obj.selectionStart;
// Posicion final en el string del texto seleccionado
var fin = obj.selectionEnd;
// Obtengo el substring
obj.value = obj.value.substring(0, ini)+'<'+etiqueta+'>'+obj.value.substring(ini, fin)+'</'+etiqueta+'>'+obj.value.substring(fin);
// Selecciono lo que estaba seleccionado anteriormente más las etiquetas
obj.selectionStart = fin+5+(etiqueta.length*2);
obj.selectionEnd = fin+5+(etiqueta.length*2);
}
}
</script>
</head>
<body onkeypress="evitaEvento(event)">
<textarea onkeydown="shortcut(event)" id="caja-texto">
...
</textarea>

Demo

Similar Posts

Códigos Javascripts interesantes

ByLuis

Una colección interesante de código Javascript, sin tener que usar frameworks de Javascript, teniendo en cuenta, que a mi parecer es conveniente antes saber Javascript y luego aprender un framework.

De los scrips que nos muestran, me gustaría destacar:

Ejecutar funciones cuando se carga la página

function addLoadListener(fn){
if(typeof window.addEventListener !='undefined') {
window.addEventListener('load',fn,false);
} else if(typeof document.addEventListener !='undefined') {
document.addEventListener('load',fn,false);
} else if(typeof window.attachEvent !='undefined') {
window.attachEvent('onload',fn);
} else {
var oldfn=window.onload
if(typeof window.onload !='function') {
window.onload=fn;
} else {
window.onload=function(){oldfn();fn();}
}
}
}

Añadir y eliminar eventos

function addEvent(obj,type,fn){
if(obj.addEventListener) {
obj.addEventListener(type,fn,false);
} else if(obj.attachEvent){
obj["e"+type+fn]=fn;
obj[type+fn]=function(){obj["e"+type+fn](window.event);}
obj.attachEvent("on"+type,obj[type+fn]);
}
}
function removeEvent(obj,type,fn) {
if(obj.removeEventListener) {
obj.removeEventListener(type,fn,false);
else if(obj.detachEvent){
obj.detachEvent("on"+type,obj[type+fn]);
obj[type+fn]=null;
obj["e"+type+fn]=null;
}
}

Obtener el elemento que llama a una función

function giT(evt){
var elem;
if (evt.target) {
elem = (evt.target.nodeType == 3) ?
evt.target.parentNode :
evt.target;
} else {
elem = evt.srcElement;
}
return elem;
}

Top Javascript Code Snippets for 2007

Popcorn.js librería Javascript que permite sincronizar vídeo y contenido en HTML5

ByLuis

Popcorn.js es una librería que permite sincronizar la etiqueta <video> de HTML5 con contenido que deseemos mostrar. Para ello utiliza las propiedades, métodos y eventos nativos de HTMLMediaElement. Además ofrece un sistema de plugins desarrollados por la comunidad:

document.addEventListener("DOMContentLoaded", function () {
      // Create a popcporn instance by calling Popcorn("#id-of-my-video")
      var pop = Popcorn("#video");
      // play the video right away
      pop.play()
      // add a footnote at 2 seconds
        .footnote({
          start: 2,
          end: 6,
          text: "This footnote is the stepping stone of progress!",
          target: "footnotediv"
        });
    }, false);

Podéis ver algunos ejemplos bastante interesantes. Una librería muy útil para presentaciones y vídeos corporativos.

Popcorn.js

|

Javascript orientado a objetos

ByLuis

Interesante tutorial que nos indica cómo usar los objetos en Javascript, ya sean los objetos predefinidos, el uso del operador new, objetos literales, su declaración, la encapsulación, la herencia, la propiedad prototype para añadir métodos y atributos a un objeto, poliformismo, … explicado con ejemplos y muy útil para aquellos que empiezan y para aquellos que quieran mejorar su código (que a todos nos viene bien).
Object-Oriented Javascript
Vía / Digg

wForms: javascript para tus formularios

ByLuis

wForms es cógido Javascript no intrusivo que te ayuda a realizar las acciones más comunes con tus formularios web. Disponible en dos versiones, comprimida y legible, ofrece tres tipos de acciones en los formularios:

  • Validación de los campos de entrada: como se define los campos obligatorios y la comprobación del formato para cada campo.
  • Sincronización entre campos: cómo controlar campos del formulario dependiendo de otros campos.
  • Secciones condicionales: si aparecen o no campos basados en respuestas anteriores.

wForms

Vía / dzone

Efecto de luces con javascript

ByLuis

Realmente definir en el título el experimento javascript que han realizado en Dragon Labs es complicado. Se trata de un efecto de luces, glow, colores en un formulario de contacto (o cualquier otra capa). El usuario verá cómo el contorno de la capa cambia de color por zonas y varia la intensidad de la “luz”.
glow.png
El efecto es expectacular, pero quizás haya que mejorarlo un poco, ya que entre otras cosas para crear el efecto de colores, usan una imagen de 133k de un tamaño de 3000×900.
Admin panel demo de Dragon Labs

Hapi.js + Vue.js ejemplo mínimo de frontend: formulario login

Hapi.js + Vue.js ejemplo mínimo de frontend: formulario login

ByLuis

Esta parte es solo frontend, aún no está configurado para que interactúe con el servidor.

Lo más destacado de este ejemplo es el uso de vue-router, paquete que permite la realización de SPA de forma sencilla. Como la aplicación será gestionada por un único fichero (index.html), es necesario configurar el servidor de webpack para que gestione las URLs que acceden a otras partes de la aplicación para que no devuelva un error 404.

Esto es fácil, tan solo hay que añadir historyApiFallback y ponerlo a true en la configuración del servidor.

devServer: {
	inline: true,
	hot: true,
	port: 9999,
	historyApiFallback: true,
},

Si usas Apache u otro servidor deberás usar una configuración distinta.

Lógicamente habrá que instalar el paquete vue-router.

Vale, ya está todo instalado, ahora solo hace falta configurar vue-router para que acepte distintas URLs y que muestre distintos controladores según sea el caso.

Para ello creamos un fichero router.js que posteriormente añadiremos a nuestra instancia de Vue:

Es fácil de entender, importamos los distintos controladores y configuramos las rutas (‘/‘ y ‘/login‘), a las que les asignaremos el controlador correspondiente.

Para indicar a Vue que vamos a usar vue-router, debemos importarlo en la instancia de la aplicación:

import App from './components/App.vue';
import router from './router';

Vue.use( VueRouter );

new Vue( {
	el: '#app',
	router,
	components: {
		App,
	},
	render: ( c ) => c( 'app' ),
} );

El siguiente paso es modificar el controlador principal de la aplicación (App.vue) para que muestre la cabecera (que tendrá su propio controlador) y la vista principal de vue-router (<router-view>):

<template>
	<div>
		<v-header />
		<router-view />
	</div>
</template>

<script>
import header from '@/js/components/layout/Header';

export default {
	name: 'App',
	components: {
		'v-header': header,
	},
};
</script>

Como no soy diseñador, pues usaré Buefy (basado en Bulma) y Material Design icons (no sé por qué le tengo algo de manía a FontAwesome).

Existe un paquete especial para usar Material Design en vue (vue-material-design-icons), que para funcionar con Buefy necesitará usar la fuente de letras de Material Design (@mdi/fonts). Instalamos todo y ya estará todo listo para empezar a diseñar nuestra página.

La cabecera (<v-header>) mostrará el logo, el menú principal y otro secundario para loguearse. No explicaré ni las clases Bulma (que yo casi ni conozco) y cómo se muestra el menú al clickar en el burger icon, ya que estos tutoriales son para llevar yo un diario de cómo desarrollar una app web con Hapi.js y Vue.js.

El controlador de la cabecera nos quedará así:

<template>
	<header>
		<nav
			class="navbar"
			role="navigation"
			aria-label="main navigation"
		>
			<div class="navbar-brand">
				<a
					class="navbar-item"
					href="https://sentidoweb.com"
				>
					<img src="/assets/images/logo.svg">
				</a>

				<a
					role="button"
					class="navbar-burger burger"
					aria-label="menu"
					aria-expanded="false"
					:class="{ 'is-active' : showNav }"
					@click="showNav = !showNav"
				>
					<span aria-hidden="true" />
					<span aria-hidden="true" />
					<span aria-hidden="true" />
				</a>
			</div>

			<div :class="[ { 'is-active' : showNav }, 'navbar-menu' ]">
				<div class="navbar-start">
					<router-link class="navbar-item" to='/'>Home</router-link>
				</div>

				<div class="navbar-end">
					<div class="navbar-item">
						<div class="buttons">
							<router-link class="button is-light" to='/login'>Log in</router-link>
						</div>
					</div>
				</div>
			</div>
		</nav>
	</header>
</template>

<script>
export default {
	data() {
		return {
			showNav: false,
		};
	},
};
</script>

Tan solo mencionar cómo vue-router gestiona la navegación, para ello hace uso de <router-link>:

<router-link class="navbar-item" to='/'>Home</router-link>

El resto del código es simplemente la página principal y el formulario “tonto”.