14

Tengo dos <input type="text"> y necesito que ambos queden centrados como si fuesen uno sólo, me explico:

Existen dos campos, uno para nombre y otro para apellido, si introduzco por ejemplo "JUAN DIAZ", este texto (que serían dos input) visualmente queda centrado en el contenedor de color amarillo, no es exacto, pero da la apariencia.

El problema radica cuando el nombre o el apellido no tienen la misma longitud, como muestro en esta imagen:

ejemplo con tres nombres diferentes

¿Existe una forma de hacerlo sólo con CSS, centrar el texto de ambos input como si fuesen uno solo? También podría optar por JS. Lo único es que siempre deben ser dos (2) input centrados. Sería algo así como la función "combinar y centrar" de Excel, sólo por poner un ejemplo.

Este es el código del problema:

input {
  border: none;
  background: transparent;
  text-transform: uppercase;
  font-weight: bold;
  width: 150px;
}

.contenedor {
  background-color: gray;
  width: 350px;
  padding: 4rem;
}

.centrar {
  background-color: yellow;
  padding: 1rem;
  margin: 0 auto;
  text-align: center
}

.nombre {
  text-align: right;
}

.apellido {
  text-align: left;
}
<div class="contenedor">

  <div class="centrar">
    <input class="nombre" type="text" /> <input class="apellido" type="text" />

  </div>
 <div>

Gracias por sus observaciones.

8
  • Hola, te recomendaria usar bootstrap. Si lo usas podés poner los dos input en un div con clase "row" y dentro de ese gran div dos con la clase "col-sm-6 col-md-6" cambiandole los numeros para que logren entrar los dos en una linea. el 22 ago. 2019 a las 20:19
  • 1
    Gracias por tu comentario, pero eso sólo me centraría los dos input (cosa que ya tengo en una sola línea) más no el contenido de éstos como si fuesen uno solo, o me equivoco? Podrías mostrarme un ejemplo de lo que mencionas por favor?
    – EMCode
    el 22 ago. 2019 a las 20:26
  • Imagino que quieres hacerlo de esa forma para poder identificar los nombres de los apellidos; pero eso se podría solucionar con un split y de esa forma sólo creas un input solamente el 22 ago. 2019 a las 21:03
  • @PauloUrbanoRivera Ciertamente, consideras que debería abrir una nueva pregunta?
    – EMCode
    el 22 ago. 2019 a las 21:11
  • 3
    Esto no es una buena idea de diseño ni usabilidad. Vas a acabar con apellidos en el campo del nombre, nombre en el campo de los apellidos o las dos cosas. Sin mencionar que para los usuarios puede ser frustrante no entender por qué si acaban de editar el nombre y le están dando al cursor de la derecha, no se está avanzando en el apellido. ¿Hay algún motivo para hacerlo de este modo?
    – Alvaro Montoro
    el 22 ago. 2019 a las 22:25

4 respuestas 4

7

Lo que buscas se puede hacer con una variable css (--value) y agregando listeners a los inputs, de modo que cuando se agregue texto a estos, su tamaño se modifique según el tamaño del texto.

Sabemos que el tamaño de ambos en total es 300px por tanto cada uno tiene 150px cuando están en equilibrio, luego podemos suponer que cada carácter agrega 4px al tamaño del input, guardando los tamaños de los textos introducidos en variables podemos hacer cálculos para asignar tamaño a los inputs a través de la variable css.

El código queda de la siguiente forma:

l1=0;
l2=0;

var inputN = document.getElementsByClassName("nombre")[0];
inputN.style.setProperty("--value", 150);
inputN.addEventListener("input", function(evt) {
   l1=inputN.value.length;
   val=150+l1*4-l2*4;
   inputN.style.setProperty("--value", val);
   inputA.style.setProperty("--value", 300-val);
},false);

var inputA = document.getElementsByClassName("apellido")[0];
inputA.style.setProperty("--value", 150);
inputA.addEventListener("input", function(evt) {
   l2=inputA.value.length;
   val=150+l2*4-l1*4;
   inputN.style.setProperty("--value", 300-val);
   inputA.style.setProperty("--value", val);
},false);
input {
  border: none;
  background: transparent;
  text-transform: uppercase;
  font-weight: bold;
}

.contenedor {
  background-color: gray;
  width: 350px;
  padding: 4rem;
}

.centrar {
  background-color: yellow;
  padding: 1rem;
  margin: 0 auto;
  text-align: center
}

.nombre {
  text-align: right;
  width: calc(var(--value)*1px);
}

.apellido {
  text-align: left;
  width: calc(var(--value)*1px);
}
<div class="contenedor">

  <div class="centrar">
    <input class="nombre" type="text" /> 
    <input class="apellido" type="text" />

  </div>
 <div>

De ese modo el texto se ve centrado sin que afecte la diferencia de tamaño entre nombre y apellido.

Espero te sea de utilidad, saludos.

2
  • 2
    Increíble, despúes de que muchos me decían que era imposible y debía plantearmelo de otro manera, llegas y me das una solución que desconocía. Mil gracias por su ayuda caballero.
    – EMCode
    el 23 ago. 2019 a las 12:16
  • @EMCode de nada, que tengas buen día. el 23 ago. 2019 a las 12:28
5

Una solución podría ser la siguiente:

  • Creamos 2 elementos ocultos con ancho dinámico, en los que vamos a guardar el nombre y el apellido, respectivamente.
  • Cada vez que se escriba en alguno de los campos, copiamos el valor de este en uno de los elementos ocultos.
  • Estos elementos ocultos al ser de ancho dinámico, podemos usar el.offsetWidth para obtener el ancho real del texto
  • Luego para determinar el ancho que debe tener el input debemos usar la formula:

    [ancho_input_nombre] = 150 + (([ancho_texto_nombre] - [ancho_texto_apellido]) / 2)
    // y viceversa para apellido
    
  • IMPORTANTE Para que el cálcuo del ancho del texto funcione correctamente, es necesario que tanto los input como los elementos ocultos tengan los mismos estilos de fuente.

Ejemplo:

let nombre = document.getElementById('nombre'),
  apellido = document.getElementById('apellido'),
  nombreText = document.getElementById('nombreText'),
  apellidoText = document.getElementById('apellidoText');

nombre.addEventListener('input', () => {
  nombreText.innerText = nombre.value;
  centrarInputs();
});

apellido.addEventListener('input', () => {
  apellidoText.innerText = apellido.value;
  centrarInputs();
});

function centrarInputs() {
  nombre.style.width = (150 + (nombreText.offsetWidth - apellidoText.offsetWidth) / 2) + 'px';
  apellido.style.width = (150 + (apellidoText.offsetWidth - nombreText.offsetWidth) / 2) + 'px';
}
input {
  border: none;
  background: transparent;
  width: 150px;
}
.contenedor {
  background-color: gray;
  width: 350px;
  padding: 4rem;
}
.centrar {
  background-color: yellow;
  padding: 1rem;
  margin: 0 auto;
  text-align: center
}
.fontStyle {
  text-transform: uppercase;
  font: 16px bold Arial;
}
#nombre {
  text-align: right;
}
#apellido {
  text-align: left;
}
.ocultar {
  visibility: hidden;
  position: absolute;
  z-index: -1;
}
<div class="contenedor">
  <div class="centrar">
    <input id="nombre" type="text" class="fontStyle" autocomplete="off" />
    <input id="apellido" type="text" class="fontStyle" autocomplete="off" />
    <span id="nombreText" class="fontStyle ocultar"></span>
    <span id="apellidoText" class="fontStyle ocultar"></span>
  </div>
</div>

1
  • 1
    Gracias por la alternativa que planteas en tu solución. Es una respuesta más que valida y espero sirva a otras personas. Quedo agradecido @Marcos
    – EMCode
    el 26 ago. 2019 a las 12:30
4

Mi solución sería crear solamente un input en tu DOM y manejar mediante split y slice la obtención de los nombres y apellidos

function process() {
  let data = $('#fullname').val()
  let firstname
  let lastname

  switch(data.split(' ').length) {
    case 3:
      firstname = data.split(' ').slice(0, 1).join(' ')
      lastname = data.split(' ').slice(-2).join(' ')
      break;
    case 4:
      firstname = data.split(' ').slice(0, 2).join(' ')
      lastname = data.split(' ').slice(-2).join(' ')
      break;
  }
  
  alert(`Nombres ${firstname} | Apellidos ${lastname}`)
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container mt-5">
  <div class="row">
    <input type="text" class="form-control text-center" placeholder="Ingrese nombre completo" id="fullname">
    <button type="button" class="btn btn-default mt-2" onclick="process()">Procesar</button>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Con split separas en un arreglo la cadena que deseas mediante la condición entregada como parámetro, que en este caso sería ' ' (espacio en blanco); y con slice obtienes una parte de la cadena de acuerdo al largo del nombre completo, ya que se puede dar el caso de tener uno a N nombres. De hecho lo tedioso de esta solución es eso, manejar las posibles opciones de nombres =/

PD: Para implementar esto debes incluir bootstrap y jquery

Nos comentas si es lo que necesitas :)

3
  • 3
    A esta solución le faltan algunos casos en el switch (tal y como está ahora sólo funciona para 3 o 4 palabras, pero hay gente que sólo tiene un nombre y un apellido). Aparte de eso, el usuario puede ahorrarse incluir jQuery si sustituye $('#fullname').val() por document.querySelector("#fullname").value. Y tampoco hace falta añadir Bootstrap si el usuario mantiene su código HTML (reduciéndolo a un solo campo con id "fullname").
    – Alvaro Montoro
    el 22 ago. 2019 a las 22:53
  • 1
    No quise seguir con los otros case porque pretendo dejar al OP algo de trabajo, mi idea siempre al responder es tratar de, además de enseñar apliquen un poco de su cosecha para motivar la mente. En cuanto a la alternativa de quitar JQuery, excelente! Y Bootstrap lo uso, ya que definitivamente mi fuerte no es el diseño el 23 ago. 2019 a las 2:12
  • Hola Paulo, claro que voy a investigar más por mi cuenta, te agradezco el tiempo y tu ayuda.
    – EMCode
    el 23 ago. 2019 a las 12:13
3

Te muestro mi ejemplo acá que se puede poner código

<div class="row">
            <div class="form-group col-sm-5">
                <input type="text" id="fecha_desde" name="fecha_desde" class="input-group date form-control form-inline" date="" data-date-format="Y-m-d H:i:s" required>
            </div>
            <div class="form-group col-sm-6">
                    <input type="text" id="fecha_hasta" name="fecha_hasta" class="input-group date form-control" date="" data-date-format="Y-m-d H:i:s" required>
            </div>              


Y la foto del resultado
resultadohtml Recordá que si utilizas bootstrap tenes que incluir las librerias css y js

4
  • 1
    Gracias de nuevo por tomarte el tiempo Sabrina, acabo de editar mi pregunta, a lo mejor no me di a entender bien. Gracias
    – EMCode
    el 22 ago. 2019 a las 20:30
  • 1
    Sí, esa configuración ya la tengo en mis clases .nombre y .apellido pero funciona si los dos input tienen la misma logintud en sus caracteres
    – EMCode
    el 22 ago. 2019 a las 20:32
  • 1
    Barbaro, ahora si se entiende. Nunca me tocó hacer algo así pero podrías investigar como manejar los márgenes de cada input dependiendo del texto que contenga. EDIT: Lo veo complicado o lo desconozco. el 22 ago. 2019 a las 20:33
  • 1
    Igualmente agradezco tu intención y tu aporte
    – EMCode
    el 22 ago. 2019 a las 20:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.