¿Cómo extender el tamaño de un cuadro de texto cuando se hace clic en él?

I am currently working on a site that utilizes a search function. I have a text box in the top corner and I want to set it so that whenever the user clicks into the box, it extends to twice the length that it currently is. How exactly would I do that? I have searched but cannot find any helpful information.

preguntado el 09 de marzo de 12 a las 14:03

Which language? which platform/framework?! -

Check out the w3cschools tutorials on "jquery" - attach an event handler to the text box when it gets the focus and modify its css to change its size -

I should have been a bit clearer. I am using Javascript, and I would like to avoid jQuery if at all possible -

You can code it "natively" in javascript of course - but then you need to handle all of the cross-browser diferences in DOM and CSS support yourself -- a major PITA -

1 Respuestas

why don't you use CSS3 transitions? you could do something like this to make the width of the textbox increase:

input, textarea {  
    width: 280px;  
    -webkit-transition: width 1s ease;  
    -moz-transition: width 1s ease;  
    -o-transition: width 1s ease;  
    -ms-transition: width 1s ease;  
    transition: width 1s ease;  
}  

input:focus, textarea:focus {  
    width: 340px;  
}  

respondido 09 mar '12, 14:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.