javascript - How to make a static sign of a currency in the input tag

Question

I want that when I focus on the input tag using tab key, it should not highlight the $ sign and instead keep it static and let the user type the value, and also if user wants to leave it blank then it should show its placeholder along with the static $ sign.

This is the markup I'm trying:

 <div style="width: 40%; float: right;">                    
    <input id="value" type="text" name="value" placeholder="$ Value" value="" required="required" onfocus="this.placeholder = '$ ', this.value='$ '" onblur="this.placeholder = '$ Value'" />
 </div>

Answer 1

I would place $ sign separately if you need it all the time and in same color:

<div style="width: 40%; float: right;">    
    <span style="border: 1px solid black; color:grey"> $
        <input id="value" type="text" style="border: none; outline: 0" name="value" placeholder="Value" value="" required="required"/>
    </span>
</div>

I also have a variant with $ sign inside input, but in that case it will change color to black when active:

<div style="width: 40%; float: right;">
    <input id="value" type="text" name="value" placeholder="$ Value" value="" required="required" onfocus="if(this.value == '') this.value='$ '" onblur="if(this.value == '$ ') this.value = ''" />
</div>