javascript - 获取网格的 <input> 子级以根据内容增大和缩小

Question

在网格中，列可以增大和缩小以填充可用空间，并且与每列的内容宽度成比例。请参阅<span>以下示例的一部分。

我想做<input>列也会增长和收缩，与<span>完全相同。是的。

.grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  width: 300px;
}

.column {
  border: 1px solid gray;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<h3>span</h3>
<div class="grid">
  <span class="column" contenteditable></span>
  <span class="column" contenteditable></span>
</div>
<h3>input</h3>
<div class="grid">
  <input class="column" type="text">
  <input class="column" type="text">
</div>

当前行为:

想要的行为:

最重要的目标是列应该根据两列宽度之间的比率来改变大小(在演示中， <span> 已经做到了这一点)

我尝试根据输入值的 HTML 宽度设置输入的最小宽度和宽度，使用 the createElement method here 计算得出。但是，当设置了 min-width 或 width 时，网格将无法再更改输入的大小，而是网格会调整输入顶部的列大小，并且省略号永远不会显示。

我认为设置宽度无论如何都是错误的方法，CSS 可以计算出输入有多少内容吗？

Answer 1

input 默认设置了一个size(根据属性大小)，但可以通过width 覆盖它。

您可以为 size 设置一个较小的值，例如 1 或 2，然后使用 javascript 根据其内容调整其大小。

这是一个使用隐藏span的想法，其中

• 输入的值在内部镜像(注意font-size和font-family，...)，
• 检索跨度的宽度，然后将其应用回输入。

// deserves to be rewritten . inspired from https://stackoverflow.com/questions/64092841/react-how-to-make-an-input-only-as-wide-as-the-amount-of-text-provided/64094013#64094013
let val = document.querySelectorAll("#text1, #text2, #text3, #text4");
let tpl = document.querySelectorAll("#sptext1, #sptext2, #sptext3, #sptext4");

function resizeIpt() {
  let text1 = val[0].value;
  let text2 = val[1].value;
  let text3 = val[2].value;
  let text4 = val[3].value;
  tpl[0].textContent = text1;
  tpl[1].textContent = text2;
  tpl[2].textContent = text3;
  tpl[3].textContent = text4;
}
let ipt = document.querySelectorAll('.grid input[type="text"]');
for (let i = 0; i < ipt.length; i++) {
  ipt[i].addEventListener("input", function() {
    // onchange ...
    tpl[i].textContent = val[i].value;
    val[i].style.width = "unset"; /* reset actual width */
    resizeIpt;
  });
}
window.onload = resizeIpt;

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  /* justify-content: left; or start will shrink the columns if contents together are  smaller than 300px of width */
  width: 300px;
  background: #bee
}

.column {
  border: 1px solid gray;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: clamp(2em, min-content, 100%);
  padding: 0 0.5em;
  font-size: inherit;
  font-family: inherit;
}

span[id].column {
  height: 0;
  overflow: hidden;
  border: none;
}

<h3>span</h3>
<div class="grid">
  <span class="column" contenteditable>let it be a really much too long text here </span>
  <span class="column" contenteditable>short</span>
</div>

<h3>input</h3>
<div class="grid">
  <span id="sptext1" class="column"></span>
  <span id="sptext2" class="column"></span>
  <input class="column" size="2" id="text1" type="text" value='let it be a really much too long text here'>
  <input class="column" size="2" id="text1" type="text" value="short">
</div>

<h3>input</h3>
<div class="grid" style="font-family:monospace;">
  <span id="sptext3" class="column"></span>
  <span id="sptext4" class="column"></span>
  <input class="column" size="2" id="text3" type="text" value="short">
  <input class="column" size="2" id="text4" type="text" value='let it be longer'>
</div>

灵感来自React: how to make an input only as wide as the amount of text provided?