09 de Septiembre de 2010

Notas Espacio Programación

galería de imágenesvideo
AUTOR: Andrés Fernández
FECHA: 19/9/2008
LECTURAS:6806
Buscar Notas
volver
Trabajando con Range y Selection en JavaScript

Selección de texto en JavaScript

Trabajando con Range y Selection en JavaScript
La selección de textos en javascript no debería darnos muchos problemas, ya que la manera estandar de manejar rangos de selección es bastante intuitiva y funciona casi igual en todos los navegadores, pero... existe Internet Explorer, y con eso está todo dicho: lo simple de pronto deviene en complejo y los fabricantes de remedios para el dolor de cabeza siguen creciendo gracias a los aportes involuntarios de Microsoft a su negocio.
No obstante, mostraremos, a manera de tips, diferentes ejemplos que cubrirán la mayoría de nuestras necesidades como webmasters a la hora de trabajar con la selección de texto en javascript, y que funcionan perfectamente en Explorer, Ópera, Safari, Firefox y Chrome.

1)Indicar la posición del cursor en campos de formulario
(ver Ejemplo):

Esta tarea, gracias a Explorer, nos obliga a usar caminos diferentes para áreas de texto y para campos de texto de línea única.
Ya en otra nota habíamos visto cómo manejarnos con áreas de texto, para las cuales usábamos una función semejante a esta, que recibe el campo a evaluar como parámetro:

<script>
function devPos(input){
if(typeof document.selection != 'undefined' && document.selection && typeof input.selectionStart == 'undefined' || input.selectionStart=='vacio'){
var str =document.selection.createRange();
var stored_range = str.duplicate();
stored_range.moveToElementText(input);
stored_range.setEndPoint( 'EndToEnd', str );
input.selectionStart = stored_range.text.length - str.text.length;
input.selectionEnd = input.selectionStart + str.text.length;
alert(input.selectionStart);
input.selectionStart='vacio';
}else if(typeof input.selectionStart != 'undefined'){
alert(input.selectionStart);
}
}
</script>


Sin embargo, si en lugar de usarla para un área de texto pretendemos usarla con un campo de texto de línea única, obtendremos un error en Explorer. De manera que para ese tipo de campos, debemos usar algo como esto:

<script>
function devPos2(input){
if(typeof document.selection != 'undefined' && document.selection && typeof input.selectionStart == 'undefined'){
var range = document.selection.createRange();
var bookmark = range.getBookmark();
var caret_pos = bookmark.charCodeAt(2) - 2;
alert(caret_pos)
}else if(typeof input.selectionStart != 'undefined'){
alert(input.selectionStart);
}
}
</script>


Como vemos, el código para los navegadores estandar es en ambos casos el mismo: campo.selectionStart. Repetimos por las dudas el enlace al ejemplo de ambas situaciones.

2)Selección parcial de texto en campos de formulario
(ver Ejemplo):

Esto también lo habíamos visto en un artículo anterior, pero también sólo para áreas de texto. Sin embargo, esta vez es el mismo camino para áreas de texto que para campos de texto de línea única. La función que usamos requiere de 3 parámetros que son:

-input: nombre del campo a evaluar
-inicio: posición del caracter de arranque de la selección
-fin: posición del caracter donde terminará la seleción

<script>
function sel(input,inicio,fin){
if(typeof document.selection != 'undefined' && document.selection){
tex=input.value;
input.value='';
input.focus();
var str = document.selection.createRange();
input.value=tex;
str.move('character', inicio);
str.moveEnd("character", fin-inicio);
str.select();
}
else if(typeof input.selectionStart != 'undefined'){
input.setSelectionRange(inicio,fin);
input.focus();
}
}
</script>


De nuevo, repetimos el enlace al ejemplo.

3)Obtener y modificar el texto seleccionado en campos de formulario
(ver Ejemplo):

El ejemplo mostrado pertenece a un editor bbCode sencillo, que es la base de funcionamiento de nuestro popular bebecode.

(No mostramos el código de ejemplo en este caso porque interfiere con el bbCode de esta página, pero pueden verlo accediendo al código fuente de este enlace.

4)Seleccionar todo el texto contenido en un elemento
(ver Ejemplo):

Aquí la selección se hace igual en todos los navegadores si los objetos cuyo texto queremos seleccionar son textareas o textfields, donde se usa el método select de dichos objetos, pero se hace de manera diferente para el resto de los objetos DOM y, por supuesto, de manera diferente para los navegadores estandar y para Explorer. Pese a estas diferencias, podemos resumir la tarea en una función que recibe el elemento en cuestión como parámetro:

<script>
function seleccionar(obj){
    if(obj.nodeName.toLowerCase()=='textarea' || (obj.nodeName.toLowerCase()=='input' && obj.type=='text')){
        obj.select();
        return;
    }
    if (window.getSelection) { 
        var sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(obj);
        sel.removeAllRanges();
        sel.addRange(range);
    } 
    else if (document.selection) { 
        document.selection.empty();
        var range = document.body.createTextRange();
        range.moveToElementText(obj);
        range.select();
    }
}
</script>


Finalmente, repetimos el enlace a este último ejemplo.
Home - Quiénes Somos - Portfolio - Espacio Diseño - Espacio Programación - Capacitación - Contacto - RSS - XHTML 1.0