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

Question

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

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

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

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

Answer 1

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

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

或者，您可以使用带有 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>

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

How to add a permanent label beside entered text in an input field in React

html

javascript

css

inputbox

reactjs