Onclick Expandir ancho del cuadro de texto

Question

Quiero usar jQuery para ampliar el ancho de un cuadro de texto de entrada durante el clic.

Por ejemplo, si la entrada tiene un ancho predeterminado de 100 px, cuando el usuario haga clic en ella para escribir, se ampliará a 150 píxeles de ancho.

¿Es posible hacer esto?

Gracias.

Answer 1

He aquí un updated example en jsFiddle que anima, y ​​vuelve al tamaño predeterminado de desenfoque.

Para referencia, vea jQuery Animate documentos.

Answer 2

seguro. Digamos que tiene

<input id="mytextbox" /> 

que puede hacer

$("#mytextbox").focus(function(){ 
    $(this).width(150) 
}); 

Answer 3

Aquí un ejemplo de trabajo basado en el ejemplo de @ wsanville con el retraso solicitado. (Tenga en cuenta también añadí un efecto de devolverlo en la pérdida de concentración, puede quitar tan fácilmente)

Working Example

** editado el tamaño de la caja de texto

Answer 4

<input type="text" id="tbText" size="30px"/>  

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#tbText').focus(function() { 
      $('#tbText').css("width", "250px"); 
     }); 
     $('#tbText').blur(function() { 
      $('#tbText').css("width", "150px"); 
     }); 
    }); 
</script> 

Answer 5

me gustaría construya sobre el ejemplo de @ wsanville eliminando el paso adicional al guardar el tamaño original. La animación también toma valores de cadena como '+ = 50' o '- = 50' para aumentar/disminuir el ancho.

See in in action on jsfiddle

$('#box').focus(function() 
{ 
    $(this).animate({ width: '+=50' }, 'slow'); 
}).blur(function() 
{ 
    $(this).animate({ width: '-=50' }, 'slow'); 
}); 

Answer 6

Sé que esto es un poco tarde a la fiesta, pero si alguien quiere una solución CSS puro que utiliza el atributo: el enfoque.

#textbox { 
    width:100px; 
    transition: 0.5s; 
} 

#textbox:focus { 
    width:150px; 
    transition: 0.5s; 
} 

Es mi jsFiddle:

https://jsfiddle.net/qo95uquv/

Tom