no perder foco

xias · #1 (**permalink**) 28/06/2006, 08:52

hola:

a ver os explico lo que tengo:

tengo un input text en mi página y un scrool. Lo que quiero es que el input text no pierda el foco aunque hayas utilizado el scrool. No se si me explique bien.

Gracias, un saludo

el_javi · #2 (**permalink**) 28/06/2006, 16:21

Buenas noches Xiacs.

Viendo lo que solicitabas, he hecho unas pruebas y solo he llegado a un razonamiento, que no me gusta demasiado...

El tema es el siguiente:

Lo primero que debes de comunicarnos es si el Scroll que dices que pulsas, es el Scroll de pagina, o un scroll programado por ti.

El tema, segun lo he entendido yo es lo siguiente: quieres, al pulsar en el scroll, que no se salga el foco de tu caja de texto.

Pues te pongo un ejemplo a continuación, y lo comento:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
<head> 
    <title>Prueba de Input SIEMPRE focado</title> 
    <script language="JavaScript1.2" type="text/javascript"> 
        // Función para mantener un INPUT siempre focado 
        function focalizaeInput(inputID) 
        { 
            setTimeout(function(){document.getElementById(inputID).focus()}, 10); 
        } 
         
        // Función que define que si hay cambio en el Scroll, se focalice la caja de texto 
        window.onscroll = function () 
        { 
            focalizaeInput('miCajita') 
        } 
    </script> 
</head> 
 
<body style="margin:0px;padding:0px"> 
<table cellpadding="0" cellspacing="0" width="100%" style="height:100px" border="1"> 
    <tr> 
        <td width="100%" height="100%" align="center" valign="top"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><input type="Text" style="width:400px;height:100px" id="miCajita"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></td> 
    </tr> 
</table> 
 
 
</body> 
</html>

La explicación es la siguiente:

1.- Nuestra cajita de texo, tiene un ID miCajita
2.- Hemos usado una función que define que si se toca el Scroll, que se focalice la caja de texto

Código PHP:

// Función que define que si hay cambio en el Scroll, se focalice la caja de texto window.onscroll = function () { focalizaeInput('miCajita') }

3.- Vamos al "motor" de este pequeño script: la función de focalizar

Código PHP:

// Función para mantener un INPUT siempre focado function focalizaeInput(inputID) { setTimeout(function(){document.getElementById(inputID).focus()}, 10); }

Ésta función recive un parámetro, que es el ID de la caja de texto que queremos focar.
Esto estaría resuelto todo con pocas letras de código:

Código PHP:

document.getElementById(inputID).focus()

, pero esto SOLO funciona en Internet Explorer.
Como buenos desarrolladores Multiplataforma que somos, probamos los scripts en diferentes navegadores, y Firefox, falla... ¿razón? La siguiente:
La "velicidad de reacción" de Firefox, por asi decirlo, es menor que la de Internet Explorer, por lo que con la línea

Código PHP:

setTimeout(function(){document.getElementById(inputID).focus()}, 10)

le estamos diciendo "cuando pasen 10 milisegundos, ejecuta la función que te digo" y con ello, le damos un tiempo de reacción

La verdad es que me enrrollo mucho al explicar los script, y mas con este tan pequeño.. pero espero que te haya sido util, y para lo que necesites, no dudes en seguir preguntandonos.

Saludos a tod@s

xias · #3 (**permalink**) 29/06/2006, 07:55

muchas gracias¡¡¡