Escrito por Yosi_ el viernes, 6 de junio de 2008
Es bastante frecuente que escribiendo un texto en un formulario web, necesitemos emplear el tabulador para indentar código, sangrar un párrafo, etc, y sin embargo al no poder hacerlo (ya que por defecto realiza la función de alternar la selección entre los elementos de la página), nos veamos obligados a introducir una serie de espacios. En momentos puntuales puede servir, pero en la mayoría de los casos resultará muy pesado.
A continuación voy a mostrar un sencillo método probado en IE, Firefox y Opera para capturar el tabulador en los formularios de vuestra web y hacer que se muestre en un "textarea". En primer lugar determinaremos el código HTML que se debe introducir en la apertura de la etiqueta:
Como vemos se ha añadido un evento "onkeydown" que nos permitirá controlar cada una de las pulsaciones que se produzcan sobre ese elemento, que serán atendidas por la función "intercept()". A continuación se muestra el código de dicha función:
En este caso el procedimiento será recoger la variable "key" que contiene el código ASCII de la tecla pulsada y comprobar si corresponde al tabulador. Si no es así, se devuelve el valor para ser mostrado en pantalla. En cambio si coincide llamaremos a la función "mostrarTab()" que se encargará de colocar la tabulación donde esté situado el cursor. Dicha función será un poco más compleja, ya que habrá que tener en cuenta las diferencias entre distintos navegadores en el cálculo de la posición del cursor. El código es el siguiente:
La descripción de este fragmento es bastante más tediosa y se sale del tema que nos ocupa, así que no merece la pena detallarla. Baste decir que la primera parte de la condición "if" introduce la tabulación en la posición del cursor (al principio si se trata de una selección) en todos los navegadores probados salvo Internet Explorer, mientras que la segunda lo hace en el de Microsoft. Aparte de eso sitúa el cursor al final de la cadena introducida y restaura el scroll vertical del textarea (si es que lo había), ya que se habría perdido al sustituir su contenido.
A continuación voy a mostrar un sencillo método probado en IE, Firefox y Opera para capturar el tabulador en los formularios de vuestra web y hacer que se muestre en un "textarea". En primer lugar determinaremos el código HTML que se debe introducir en la apertura de la etiqueta:
<textarea name="texto" onkeydown="return intercept(event,this)">
Como vemos se ha añadido un evento "onkeydown" que nos permitirá controlar cada una de las pulsaciones que se produzcan sobre ese elemento, que serán atendidas por la función "intercept()". A continuación se muestra el código de dicha función:
function intercept(event,obj) {
var key = event.keyCode ? event.keyCode : event.which ?
event.which : event.charCode;
if (key == 9) {
mostrarTab(obj);
return false;
} else {
return key;
}
}En este caso el procedimiento será recoger la variable "key" que contiene el código ASCII de la tecla pulsada y comprobar si corresponde al tabulador. Si no es así, se devuelve el valor para ser mostrado en pantalla. En cambio si coincide llamaremos a la función "mostrarTab()" que se encargará de colocar la tabulación donde esté situado el cursor. Dicha función será un poco más compleja, ya que habrá que tener en cuenta las diferencias entre distintos navegadores en el cálculo de la posición del cursor. El código es el siguiente:
function mostrarTab(obj) {
rolling=obj.scrollTop;
if(typeof obj.selectionStart == 'number') {
// Resto de navegadores
var start = obj.selectionStart;
var end = obj.selectionEnd;
obj.value = obj.value.substring(0, start)+"\t";
obj.value+= obj.value.substring(start, obj.value.length);
obj.focus();
obj.selectionStart = obj.selectionEnd= end + 2;
}
else if(document.selection) {
// Internet Explorer
obj.focus();
var range = document.selection.createRange();
if(range.parentElement() != obj) return false;
if (range.text != "") {
if(typeof range.text == 'string'){
document.selection.createRange().text ="\t"+range.text;
}
else obj.value += "\t";
}
else
obj.value += "\t";
}
obj.scrollTop=rolling;
}La descripción de este fragmento es bastante más tediosa y se sale del tema que nos ocupa, así que no merece la pena detallarla. Baste decir que la primera parte de la condición "if" introduce la tabulación en la posición del cursor (al principio si se trata de una selección) en todos los navegadores probados salvo Internet Explorer, mientras que la segunda lo hace en el de Microsoft. Aparte de eso sitúa el cursor al final de la cadena introducida y restaura el scroll vertical del textarea (si es que lo había), ya que se habría perdido al sustituir su contenido.
68 Comentarios
Temas relacionados:
JavaScript
Web