如何在 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>