如何在 React 的输入字段中的输入文本旁边添加永久标签答案

【问题标题】：How to add a permanent label beside entered text in an input field in React如何在 React 的输入字段中的输入文本旁边添加永久标签
【发布时间】：2021-07-02 16:54:59
【问题描述】：

我的应用程序中有一个输入字段，我需要在该输入字段中输入的文本旁边放置一个永久标签。此外，要放置的label 的styles 与输入的文本不同。如下图所示，

我尝试复制 here 的行为。我可以在输入的文本旁边放置一个标签，但我希望标签在输入框中输入字符时也向前移动。目前，我输入的文本位于放置的标签之上，如下所示 -

我发现了一个类似的问题here，但在建议的答案中，标签不会随着输入的文本移动。

我怎样才能实现这种行为？提前非常感谢！

【问题讨论】：

标签： javascript html css reactjs inputbox

【解决方案1】：

标签的样式与输入的样式不同，这使得这变得特别具有挑战性；它们需要是不同的 DOM 节点，因此输入屏蔽等更简单的解决方案是不够的。

您需要根据其内容缩放输入的宽度；一种方法是使用普通的<input> 字段和resize it via javascript on every keystroke。

或者，您可以使用contentEditable 元素和display: inline-block 来自动处理布局；然后，当您准备使用该值执行某些操作时，您可以读取它的 innerHTML。下面是一个简单的演示：

getvalue = () => {
  console.log(document.getElementById('input').innerText)
}

.fake_form_input {
  border: 1px solid;
  paddding: 0.2em;
}

#input {
  display: inline-block;
  min-width: 1em;
  padding: 0.2em;  
  outline: none;

}

.label {
  display: inline-block;
  color: red;
}

<div class="fake_form_input">
  <div contenteditable id="input">0
  </div>
  <div class="label">KM</div>
</div>

<button onclick="getvalue()">Go</button>

（请注意，这会引入一些 a11y 问题，如果您使用此技术，您将需要添加一些 ARIA 标记等）

【讨论】：

将 outline: none 添加到 #input 样式将隐藏数字周围的轮廓。这样数字输入和KM文本不会有任何分离。
好建议，已添加

【解决方案2】：

试一试：

const myInput = document.getElementById('inp');
const inputLable = document.querySelector('.inputContainer span');


myInput.addEventListener('keydown', handleLable)

function handleLable(element) {
    const charLength = element.target.value.length;
    
    inputLable.style.left = charLength * 9 + 20 < myInput.clientWidth - 40 ? charLength * 9 + 20 + "px" : myInput.clientWidth - 30 + "px";
    
}

.inputContainer{
    position:relative;
  width:300px;
}

.inputContainer span{
    position:absolute;
    left:16px;
  top:50%;
  transform:translateY(-50%);
  color: red;
}

#inp{
    width: 100%;
    padding-right: 48px;
    font-size: 16px;
  
}

<div class="inputContainer">
    <input type="text" id="inp" />
    <span>KMs</span>
</div>

【讨论】：

如果您在输入中键入 12345，则最后一位数字与 KM 重叠
是的，我修好了。