I am looking to add sticky hyphens in a text input field. I have included an image illustrating my requirement. The areas that need fixing are highlighted in red. The first hyphen should appear after every three number inputs, followed by the next one after two inputs, and so on.
Currently, the numbers show up as I click on them, but I want the dashes to be displayed by default.
I attempted using a span element to achieve this, but unfortunately, I was unsuccessful.
<div class="row">
<p id="p" style="font-size: 30px;">Enter location:<input style="margin-left: 10px; font-size: 30px;"
type="text" [value]="codeNum" id="code" placeholder="___-__-__-__-__">
<button type="button" style="margin-left: 10px; font-size: 30px; border: white 3px solid;"
class="btn btn-dark btn-lg" (click)="clear()">Clear</button>
<button type="button" style="margin-left: 10px; font-size: 30px; border: white 3px solid;"
class="btn btn-dark btn-lg" (click)="allClear()">Clear All</button>
</p>
</div>
</div>
<div class="calculator-keys">
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('0')" value="0">0</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('1')" value="1">1</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('2')" value="2">2</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('3')" value="3">3</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('4')" value="4">4</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('5')" value="5">5</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('6')" value="6">6</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('7')" value="7">7</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('8')" value="8">8</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('9')" value="9">9</button>
</div>
https://i.sstatic.net/rRwlX.jpg
Appreciate your help!