Spacing placholder-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>