Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Reducir ancho de input y saltar línea

Estas en el tema de Reducir ancho de input y saltar línea en el foro de HTML en Foros del Web. Estoy utilizando bootstrap y jquery ui datepicker. Tengo un campo periodo que tiene el siguiete formato "AAAAMM". Tengo dos preguntas: 1) Es posible que al ...
  #1 (permalink)  
Antiguo 20/06/2016, 16:56
Avatar de bandolera  
Fecha de Ingreso: abril-2009
Mensajes: 613
Antigüedad: 15 años
Puntos: 7
Pregunta Reducir ancho de input y saltar línea

Estoy utilizando bootstrap y jquery ui datepicker. Tengo un campo periodo que tiene el siguiete formato "AAAAMM".
Tengo dos preguntas:
1) Es posible que al ingresar periodo y dar enter pase automáticamente al otro campo?
2) Cómo reduzco el ancho del inputo de periodo???
Código HTML:
 <form action="trabajo.php" method="POST" enctype="multipart/form-data">
      <div class="form-group">
        <label for="periodo">Periodo:</label>
        <input class="form-control" id="periodo" type="text" placeholder="Formato AAAAMM" autofocus required maxlength="6" size="6">
      </div>      
      <div class="form-group">
        <label for="fecha">Fecha:</label>
        <input class="form-control" id="datepicker" type="text" placeholder="Fecha">
      </div>
      <button class="btn btn-primary">Aceptar</button>
    </form> 
Gracias.
__________________
Todos somos iguales. NO! a la violencia de género.
  #2 (permalink)  
Antiguo 20/06/2016, 17:00
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 14 años
Puntos: 468
Respuesta: Reducir ancho de input y saltar línea

Que recuerde los formularios de bootstrap en este caso los inputs, ocupan el 100% del div en el que estén dentro, reduce el tamaño del div, por medio del grid de bootstrap para adaptarlos a tus preferencias, y luego a parte, siempre puedes crear tu propio css.
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #3 (permalink)  
Antiguo 20/06/2016, 20:04
 
Fecha de Ingreso: diciembre-2015
Mensajes: 529
Antigüedad: 8 años, 3 meses
Puntos: 39
Respuesta: Reducir ancho de input y saltar línea

El div de ese input puedes meterlo en un grid del tamaño que quieras.

Código HTML:
Ver original
  1. <div class="col-lg-3 col-md-3 col-xs-12>
  2.         <div class="form-group">
  3.         <label for="periodo">Periodo:</label>
  4.         <input class="form-control" id="periodo" type="text" placeholder="Formato AAAAMM" autofocus required maxlength="6" size="6">
  5.       </div>  
  6. </div>

Y lo otro que comentas, no creo que sea posible con html, tienes que hacer algo con jquery en este caso.
  #4 (permalink)  
Antiguo 21/06/2016, 08:02
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 1 mes
Puntos: 1826
Respuesta: Reducir ancho de input y saltar línea

Presionar enter para cambiar de campo no debería usarse. Para cambiar de campo lo normal es usar TAB.
  #5 (permalink)  
Antiguo 23/06/2016, 10:49
Avatar de bandolera  
Fecha de Ingreso: abril-2009
Mensajes: 613
Antigüedad: 15 años
Puntos: 7
Respuesta: Reducir ancho de input y saltar línea

Cita:
Iniciado por Rafael Ver Mensaje
Presionar enter para cambiar de campo no debería usarse. Para cambiar de campo lo normal es usar TAB.
Sí, lo sé, pero es un requerimiento del área contable. Dicen que el Tab es algo lento. Así que por eso quieren solo el enter para saltar de campo en campo.
__________________
Todos somos iguales. NO! a la violencia de género.
  #6 (permalink)  
Antiguo 23/06/2016, 12:08
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 14 años
Puntos: 468
Respuesta: Reducir ancho de input y saltar línea

Eso seguramente se podrá hacer con JavaScript, aunque no es de este tema te pondré un ejemplo que he encontrado googleando un poco.

No se si funciona, pruebalo y nos dices.

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. next=0;
  3. function nextel(event)
  4. {
  5. if(event.keyCode==13){
  6. if(next>2){next=0}
  7. document.forms[0].elements[next].focus();
  8. next++;
  9. }
  10. }
  11. </script>
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #7 (permalink)  
Antiguo 27/07/2016, 15:56
Avatar de bandolera  
Fecha de Ingreso: abril-2009
Mensajes: 613
Antigüedad: 15 años
Puntos: 7
Respuesta: Reducir ancho de input y saltar línea

Hola quería indicar que :

1) Lo solucioné con :
Código HTML:
<input class="form-control" id="periodo" type="text" placeholder="Formato AAAAMM" required autofocus> 
No avanza hasta que ingreso un valor.

2) Reduje el ancho con la sugerencia de
Código HTML:
rodocoyote15
(leí la documentación y encontré más cosas).

Gracias a todos. Cierro este hilo.
__________________
Todos somos iguales. NO! a la violencia de género.

Etiquetas: form
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:06.