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

Question

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

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

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

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

Answer 1

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

您需要根据其内容缩放输入的宽度； 一种方法是使用普通的<input>字段并在每次击键时通过 javascript 调整其大小。

或者，您可以使用带有display: inline-block的contentEditable元素来自动处理布局； 然后当您准备好使用该值执行某些操作时，您可以读取其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 标记等）

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