How To Make A Static Sign Of A Currency In The Input Tag
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 le
Solution 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>
Solution 2:
Here is jsfiddle:
http://jsfiddle.net/hv188mj7/
HTML:
<input id="value" type="text" name="value" placeholder="$ Value" value="" onfocus="
this.placeholder = '$ '+this.value;
var s = this.value;
var r = s.slice(2,99999);
this.value = r;
this.value='$ '+this.value
" onblur="this.placeholder = '$ Value'" />
Solution 3:
i used css for workaround. here is fiddle: http://jsfiddle.net/Jack_anderson/3bg7ta8h/2/
<head>
<style>
#value {
background:no-repeat url('image_src');
padding-left:.55em;
}
</style>
</head>
<body>
<div style="width: 40%; float: right;">
<input id="value" type="text" name="value" placeholder="Value" value="" required="required" />
</div>
</body>
Post a Comment for "How To Make A Static Sign Of A Currency In The Input Tag"