how can i leave the placholder when start typeing and just extends forward
like when i type 100 space and INX
100 INX
so that when i type 100. INX move forward and full input becomes
100 INX
<!DOCTYPE html>
<html>
<body>
<h1>Extend placeholder forward</h1>
<input type="text" id="left" name="left" oninput="right.value = left.value; return true;" placeholder="INX"/>
<input type="text" id="right" name="right" oninput="left.value = right.value; return true;" placeholder="INX" disabled />
</body>
</html>
No, you can't modify the behavior of a native placeholder.
Sort of hacky workaround with positioning, pseudo elements, and css variables:
document.querySelector('#left').addEventListener('input', function() {
this.parentElement.style.setProperty('--val', "'"+this.value+"'");
document.querySelector('#right').value = this.value ? this.value + ' INX' : '';
});#div1, #div2 {
position: relative;
display: block;
width: fit-content;
width: -moz-fit-content;
--val: '';
font-family: sans-serif;
font-size: 14px;
}
#div1::after {
content: var(--val) ' INX';
position: absolute;
left: 3px;
top: 1px;
bottom: 1px;
pointer-events: none;
line-height: 20px;
}
#left, #right {
font-family: inherit;
font-size: inherit;
caret-color: black;
}
#left {
color: transparent;
}<h1>Extend placeholder forward</h1>
<div id="div1"><input type="text" id="left" name="left" maxlength="18" /></div>
<div id="div2"><input type="text" id="right" name="right" placeholder="INX" disabled /></div>It's tricky to do things with an input element - you can't attach pseudo elements for example.
Taking a slightly different approach, if instead of input you use a contenteditable div you can attach an after element with the INX as content and it will move along ahead of the actual input as the user types:
div {
display: inline-block;
width: auto;
border: 1px solid black;
border-radius: 5px;
background: #eeeeee;
padding: 5px;
}
div::after {
content: ' INX';
}<div contenteditable></div>