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

如何将两个输入文本的内容居中，就好像它们是一个一样？

  • 772

我有两个<input type="text">，我需要两个都居中，就好像它们是一个一样，让我解释一下：

有两个字段，一个用于姓名，一个用于姓氏，例如，如果我输入“JUAN DIAZ”，则此文本（将是两个input）在黄色容器中视觉居中，它不准确，但它给出了外貌。

问题是当名字或姓氏的长度不同时，如下图所示：

具有三个不同名称的示例

有没有办法只使用 CSS 来将两个输入的文本居中，就好像它们是一个一样？你也可以选择JS。唯一的问题是必须始终有两 (2) 个input居中。举个例子，它就像 Excel 的“合并和居中”功能。

这是问题代码：

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>

谢谢您的意见。

javascript

4 Answers

  1. Best Answer

    您要查找的内容可以通过 css 变量 ( --value) 并向输入添加侦听器来完成，这样当向其中添加文本时，它们的大小会根据文本的大小进行修改。

    我们知道两者的总大小300px因此在它们处于平衡状态时每个都有150px，那么我们可以假设每个字符都会增加4px输入的大小，从而将输入的文本的大小保存在我们可以进行计算以分配的变量中通过 css 变量的输入大小。

    代码如下：

    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>

    通过这种方式，文本居中而不影响名字和姓氏之间的大小差异。

    我希望你觉得它有用，问候。

    • 7

  2. 解决方案可能如下：

    • 我们创建了 2 个具有动态宽度的隐藏元素，我们将分别在其中存储nombre和apellido。
    • 每次写入其中一个字段时，我们都会将其值复制到隐藏元素之一中。
    • 这些隐藏元素是动态宽度，我们可以使用它们el.offsetWidth来获取文本的实际宽度

    • 然后要确定它应该具有的宽度，input我们必须使用公式：

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

    • 重要信息为了正确计算文本宽度，theinput和 theelementos ocultos必须具有相同的字体样式。

    例子：

    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. 我的解决方案是input在您的中仅创建一个，DOM并通过拆分和切片获取姓名和姓氏来管理

    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>

    随着split您使用作为参数给出的条件将您想要的字符串分隔成一个数组，在这种情况下将是 ' ' （空格）；并slice根据全名的长度获得字符串的一部分，因为可以有一个到N个名称。事实上，这个解决方案的繁琐之处在于，处理可能的名称选项 =/

    PS：要实现这一点，您必须包括引导程序和jquery

    告诉我们它是否是您需要的:)

    • 4

  4. 我在这里向您展示我的示例，您可以输入代码

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


    结果的照片
    结果html 请记住，如果您使用引导程序，则必须包含 css 和 js 库

    • 3