1

Input box in the card below accepts value in percentage. Hence, I have got a placeholder in the input box that says Percentage (%).

enter image description here

I want to suffix value with a % symbol when I start entering input.

  1. Initially, it should be "Percentage (%)". Check #3 "AU Small Finance Bank"
  2. If the non-zero input value is provided then it should be "{{value}}%". Check #1 "ABB India Ltd"
  3. If the input value is not provided or if it is 0 then make it back to "Percentage (%)". I want #2 "ACC Ltd" to show "Percentage (%)", because it was touched but no value was provided.

Link to codepen https://codepen.io/agrawalo/pen/NWKaWMm

<input placeholder="Percentage (%)"  id="input_{{stock.code}}" class="stock"/>

JS code:

$('.stock').on('focus click', function() {
  $(this)[0].setSelectionRange(0, 0);
  $(this).val('%');
})
ThinkGeek
  • 4,749
  • 13
  • 44
  • 91
  • check out this :https://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form I will help u – Deepshika S Sep 02 '19 at 07:39
  • Its called a suffix. Try this solution and see if it helps you. https://stackoverflow.com/questions/49796934/add-a-text-suffix-to-input-type-number?noredirect=1&lq=1 – Gosi Sep 02 '19 at 07:46
  • You could also try something like this: https://codepen.io/swhdesigns/pen/bNwVgG – Gosi Sep 02 '19 at 07:48
  • Can someone update my codepen ? – ThinkGeek Sep 02 '19 at 07:51
  • @LokeshAgrawal you want the percent inside the box ? because you cant always insert the % along with the data and manipulate it ? – strek Sep 02 '19 at 08:03

1 Answers1

-1

Try value instead of Placeholder

<input value="0%"  id="input_{{stock.code}}"/>
Nikhil Patil
  • 11
  • 1