获取<输入>网格的孩子根据内容增长和缩小 [英] Get <input> children of grid to grow and shrink based on content

查看：17
本文介绍了获取<输入>网格的孩子根据内容增长和缩小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在网格中，列可以增长和缩小以填满可用空间，并与每列的内容宽度成比例.请参阅下面示例的 部分.

我也想让 列增长和缩小，就像 所做的一样.

.grid {显示:网格；网格模板列:重复(2，自动)；宽度:300px；}.柱子 {边框:1px纯灰色；溢出:隐藏；文本溢出:省略号；空白:nowrap；}

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

<h3>输入</h3><div class="grid"><input class="column" type="text"><input class="column" type="text">

当前行为:

通缉行为:

列应该根据两列宽度之间的比率改变大小这一事实是最重要的目标(在演示中，s 已经这样做了)

我尝试根据其值的 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 where

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

inspired from React: how to make an input only as wide as the amount of text provided?

这篇关于获取&lt;输入&gt;网格的孩子根据内容增长和缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆