Ensanchar cuadro de texto SIN MOVERLO!

danyof · #1 (**permalink**) 31/03/2010, 05:02

Hola! que hay.

Vereis, quiero hacer un formulario con cuadros de texto de modo que al pasar el raton el grosor de cada cuadro de texto se duplique.

Mi problema es el que ilustra la siguiente imagen: en donde cada cuadrado representa un pixel, y el color gris representa el borde del cuadro de texto:

http://img511.yfrog.com/i/cuadricula.png/

Cuando el grosor tiene 1pixel esta correcto

Pero al agrandarlo a 2, el problema es que el propio cuadro de texto, donde se encuentra el TEXTO se mueve, ya que en realidad lo que se mantiene fijo es la esquina superior izquierda del elemento (marcada con uja cruz roja)

Yo lo que quiero es que lo que se quede fijo sea el punto azul, ya que al hacer este efecto, es molesto que el texto se este moviendo.

Lo he conseguido hacer moviendo la posicion del cuadro de texto un pixel a la izquierda y hacia arriba a la vez que aumento el grosor.

¿Que opinais de este metodo? ¿Funcionara bien en todos los navegadores?

En unas horas subo el codigo y la pagina para que lo probeis.

Gracias!

chichote · #2 (**permalink**) 31/03/2010, 06:50

jejeje le daba vueltas y no te comprendia.

bueno si, es una buena opcion, no me habia planteado, sube el codigo y vemos la compatibilidad en diferentes navegadores.

saludos

danyof · #3 (**permalink**) 31/03/2010, 08:49

Bien, pues aqui pongo varias cosillas, el ensanchamiento es de 25pixeles, esta exagerado para que se aprecie bien.

El efecto como queda simplemente ensanchandolo, vereis que queda super cutre:

http://sites.google.com/site/danyof/Home/pruebagrosor02.html?attredirects=0&d=1

El efecto solucionado moviendo la posicion del cuadro de texto a la vez que se ensancha:

http://sites.google.com/site/danyof/Home/pruebagrosor.html?attredirects=0&d=1

Pensais que funcionara bien en todos los navegadores?
He probado en:
Firefox
Chrome
Internet explorer, y se ve bien en los tres.... pero no estoy seguro al 100% de si esto es lo mas correcto!

Aqui os pongo las dos funciones que uso para que no se note el movimiento:

Código:

Inicialmente el cuadro esta a 100px de la derecha y 100px de arriba:
...
#dos{border-width:1px; top:100px; left:100px;}
...

Y aqui abajo las funciones

function sobre(){
document.getElementById('dos').style.borderWidth="25px";
document.getElementById('dos').style.top="76px";
document.getElementById('dos').style.left="76px";
}

function quita(){
document.getElementById('dos').style.borderWidth="1px";
document.getElementById('dos').style.top="100px";
document.getElementById('dos').style.left="100px";

Y aqui os pongo el codigo entero de la segunda forma por si os apetece verlo entero

Código:

<html>

<head>

<style type="text/css">
input{border:solid; position:absolute;}
#dos{border-width:1px; top:100px; left:100px;}
</style>

<script type="text/javascript">
function sobre(){
document.getElementById('dos').style.borderWidth="25px";
document.getElementById('dos').style.top="76px";
document.getElementById('dos').style.left="76px";
}

function quita(){
document.getElementById('dos').style.borderWidth="1px";
document.getElementById('dos').style.top="100px";
document.getElementById('dos').style.left="100px";
}


</script>

</head>

<body>

<form>
<input type="text" id="dos" onMouseOver="sobre();" onMouseOut="quita();" value="TEXTO">
</form>

</body>

</html>

danyof · #4 (**permalink**) 01/04/2010, 15:53

Y bien? Os parece adecuado?