'Spacing placholder

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>
javascripthtmljquerycss


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A Haworth

Related Questions