Reaction：如何使输入的范围与提供的文本量一样宽？

本文介绍了Reaction：如何使输入的范围与提供的文本量一样宽？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问题很简单：我正在尝试创建与提供给他们的文本一样大的输入。

沙盒：https://codesandbox.io/s/long-snowflake-6u13n?file=/src/Test.jsx

我的设计意图是动态生成输入，然后允许用户具有特定于每个输入的样式，从而在视觉上帮助根据外部事件拆分每个句子。但在我可以继续前行之前，我的输入容器必须和其中的文本一样大。

有什么想法吗？

推荐答案

这里是一种来自普通Html/css的方法和一个工作代码片段，它将span中键入的值隐藏在absoluteposition中input集合的后面。Css可以使span和input匹配相同的长度/宽度。拉伸/折叠父对象(label)将完成作业。

在@silvenon的帮助下，您还可以在代码片段下面找到一个反应样本

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

var val = document.querySelector('#test');
let tpl = document.querySelector('#tpl');
let text = val.value;
 tpl.textContent= text;

val.addEventListener("input", function () {// onchange ...
  let text= val.value;
  //console.log(text);
  tpl.textContent= text;
  });

label {
  display: inline-block;
  position: relative;
  min-width: 2em;
  min-height: 1.4em;
}

#tpl {
  white-space: pre;
  /* max-width : could be wised to set a maximum width and overflow:hidden; */
}

#test {
  font-family: inherit;
  font-size: inherit;
  position: absolute;
  vertical-align: top;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
}

<label><span id="tpl"></span><input id='test' value="Some test to try" ></label>