The input box below accepts values in percentage form. To indicate this, I have set a placeholder that says Percentage (%).
https://i.sstatic.net/LJ1ee.png
My goal is to automatically add a % symbol to the value as soon as it is entered into the input field.
- Initially, the placeholder should be "Percentage (%)". For example, check #3 "AU Small Finance Bank"
- If a non-zero input value is provided, it should display "{{value}}%". See example #1 "ABB India Ltd"
- If no input value is provided or if it's 0, the text should revert back to "Percentage (%)". Example: #2 "ACC Ltd" will show "Percentage (%)" because it was touched but left empty.
Link to codepen https://codepen.io/agrawalo/pen/NWKaWMm
<input placeholder="Percentage (%)" id="input_{{stock.code}}" class="stock"/>
JavaScript code:
$('.stock').on('focus click', function() {
$(this)[0].setSelectionRange(0, 0);
$(this).val('%');
})