问题描述
我的应用程序中有一个输入字段,我需要在该输入字段中输入的文本旁边放置一个永久标签。此外,要放置的 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>