¿Cómo centrar el contenido de dos input text como si fuesen uno solo?

publicado por: Anonymous

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:

_x000D_

_x000D_

input {_x000D_
  border: none;_x000D_
  background: transparent;_x000D_
  text-transform: uppercase;_x000D_
  font-weight: bold;_x000D_
  width: 150px;_x000D_
}_x000D_
_x000D_
.contenedor {_x000D_
  background-color: gray;_x000D_
  width: 350px;_x000D_
  padding: 4rem;_x000D_
}_x000D_
_x000D_
.centrar {_x000D_
  background-color: yellow;_x000D_
  padding: 1rem;_x000D_
  margin: 0 auto;_x000D_
  text-align: center_x000D_
}_x000D_
_x000D_
.nombre {_x000D_
  text-align: right;_x000D_
}_x000D_
_x000D_
.apellido {_x000D_
  text-align: left;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

Gracias por sus observaciones.

solución

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:

_x000D_

_x000D_

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

_x000D_

input {_x000D_
  border: none;_x000D_
  background: transparent;_x000D_
  text-transform: uppercase;_x000D_
  font-weight: bold;_x000D_
}_x000D_
_x000D_
.contenedor {_x000D_
  background-color: gray;_x000D_
  width: 350px;_x000D_
  padding: 4rem;_x000D_
}_x000D_
_x000D_
.centrar {_x000D_
  background-color: yellow;_x000D_
  padding: 1rem;_x000D_
  margin: 0 auto;_x000D_
  text-align: center_x000D_
}_x000D_
_x000D_
.nombre {_x000D_
  text-align: right;_x000D_
  width: calc(var(--value)*1px);_x000D_
}_x000D_
_x000D_
.apellido {_x000D_
  text-align: left;_x000D_
  width: calc(var(--value)*1px);_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

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.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *