获取<输入>网格的孩子根据内容增长和缩小

我尝试根据其值的 HTML 宽度设置输入的最小宽度和宽度，使用 createElement 方法计算这里.但是当设置 min-width 或 width 时，输入的大小不能再被网格改变，而是网格调整输入顶部的列大小，椭圆永远不会显示.我认为设置宽度无论如何都是错误的方法，CSS 能算出输入有多少内容吗? 解决方案 input 有一个 size 由默认设置(从属性大小)，但它可以通过宽度.您可以将 size 设置为一个较小的值，例如 1 或 2，然后使用 javascript 根据其内容调整其大小.这是一个使用隐藏 span where 的想法输入的值被镜像到里面(注意font-size和font-family，...)，检索跨度的宽度，然后将其应用回输入.//值得重写.灵感来自 https://stackoverflow.com/questions/64092841/react-how-to-make-an-input-only-as-wide-as-the-amount-of-text-provided/64094013#64094013let val = document.querySelectorAll("#text1, #text2, #text3, #text4");let tpl = document.querySelectorAll("#sptext1, #sptext2, #sptext3, #sptext4");函数 resizeIpt() {让 text1 = val[0].value;让 text2 = val[1].value;让 text3 = val[2].value;让 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 (让 i = 0; i < ipt.length; i++) {ipt[i].addEventListener("输入", function() {//改变...tpl[i].textContent = val[i].value;val[i].style.width = "未设置";/* 重置实际宽度 */调整大小；});}window.onload = resizeIpt;* {box-sizing: 边框框；}.网格 {显示:网格；网格模板列:重复(2，自动)；/* 对齐内容:左；如果内容一起小于 300px 的宽度，或者 start 将缩小列*/宽度:300px；背景:#bee}.柱子 {边框:1px纯灰色；溢出:隐藏；文本溢出:省略号；空白:nowrap；最小宽度:夹子(2em，最小内容，100%)；填充:0 0.5em；字体大小:继承；字体系列:继承；}跨度[id].列{高度:0；溢出:隐藏；边界:无；}<h3>span</h3><div class="grid"><span class="column" contenteditable>让它在这里的文本真的太长了</span><span class="column" contenteditable>short</span><h3>输入</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='让它在这里是一个太长的文本'><input class="column" size="2" id="text1" type="text" value="short"><h3>输入</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='让它更长'>灵感来自 React:如何使输入仅与提供的文本量一样宽?In a grid, columns can grow and shrink to fill up available space, and do this proportional to the content widths of each column. See the <span> part of the example below.I would like to make <input> columns grow and shrink too, in exactly the same way the <span>s do..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>Current behaviour:Wanted behaviour:The fact that the columns should change size depending on the ratio between the two columns' widths is the most important goal (in the demo, the <span>s already do this)I have tried setting min-width and width of the inputs based on the HTML-width of their value, calculated using the createElement method here. But when min-width or width are set, the size of the input can't be changed by the grid anymore, instead the grid resizes columns over the top of the input and the ellipses never show.I think setting widths is the wrong way to do this anyway, can CSS figure out how much content an input has? 解决方案 input have a size set by defaut (from the attribute size) but it can be overridden via width.You can set a small value to size , alike 1 or 2, then use javascript to resize it according to its content.here is an idea using hidden span wherethe value of input are mirrored inside (mind font-size and font-family, ...),retrieve the width of the span then apply it back to the input.// 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#64094013let 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>inspired from React: how to make an input only as wide as the amount of text provided? 这篇关于获取&lt;输入&gt;网格的孩子根据内容增长和缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！