Home / Questions / 287573
Accepted
EMCode
Asked: 2020-08-23 12:05:56 +0800 CST 2020-08-23 12:05:56 +0800 CST

How to center the content of two input text as if they were one?

  • 772

I have two <input type="text">and I need both to be centered as if they were one, let me explain:

There are two fields, one for name and one for last name, if I introduce for example "JUAN DIAZ", this text (which would be two input) is visually centered in the yellow container, it is not exact, but it gives the appearance.

The problem is when the first name or last name do not have the same length, as I show in this image:

example with three different names

Is there a way to do it only with CSS, to center the text of both inputs as if they were one? You could also opt for JS. The only thing is that there must always be two (2) inputcentered. It would be something like Excel's "combine and center" function, just to give an example.

This is the problem code:

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>

Thank you for your comments.

javascript

4 Answers

  1. Best Answer

    What you are looking for can be done with a css variable ( --value) and adding listeners to the inputs, so that when text is added to them, their size is modified according to the size of the text.

    We know that the size of both in total is 300pxtherefore each one has 150pxwhen they are in balance, then we can assume that each character adds 4pxto the size of the input, saving the sizes of the texts entered in variables we can make calculations to assign size to the inputs to through the css variable.

    The code is as follows:

    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>

    In this way the text is centered without affecting the difference in size between first and last name.

    I hope you find it useful, greetings.

    • 7

  2. A solution could be the following:

    • We create 2 hidden elements with dynamic width, in which we are going to store the nombreand the apellido, respectively.
    • Every time one of the fields is written, we copy its value into one of the hidden elements.
    • These hidden elements being dynamic width, we can use them el.offsetWidthto get the actual width of the text

    • Then to determine the width that it should have inputwe must use the formula:

      [ancho_input_nombre] = 150 + (([ancho_texto_nombre] - [ancho_texto_apellido]) / 2)
// y viceversa para apellido

    • IMPORTANT For the calculation of the text width to work correctly, it is necessary that both the inputand the elementos ocultoshave the same font styles.

    Example:

    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>

    • 5

  3. My solution would be to create only one inputin your DOMand manage by split and slice the obtaining of the names and surnames

    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>

    With splityou separate the string you want into an array using the condition given as a parameter, which in this case would be ' ' ( white space ); and with sliceyou get a part of the string according to the length of the full name, since it is possible to have one to N names. In fact, the tedious thing about this solution is that, handling the possible name options =/

    PS: To implement this you must include bootstrap and jquery

    Tell us if it's what you need :)

    • 4

  4. I show you my example here that you can put code

    <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>


    And the photo of the result
    resulthtml Remember that if you use bootstrap you have to include the css and js libraries

    • 3