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

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

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

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

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

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

解决方法

使标签样式与输入不同是使这特别具有挑战性的原因；它们需要是不同的 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 标记等）

,

试试看：

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>