Need help to make "%" sign show up automatically to my input field when user type number

<input type="text" name="ownership" id="ownership" placeholder="2.00%">

like here: If user enter some number it will always add "%" sign in view. Probably should use some js, but I'm not familiar yet.

I have tried This way, but it works for every input

 <script type="text/javascript">
   $('input').change(function() {
        $(this).val(function(index, old) { return old.replace() + '%'; });
    });
</script>

Need help to make "%" sign show up automatically to my input field when user type number

<input type="text" name="ownership" id="ownership" placeholder="2.00%">

like here: If user enter some number it will always add "%" sign in view. Probably should use some js, but I'm not familiar yet.

I have tried This way, but it works for every input

 <script type="text/javascript">
   $('input').change(function() {
        $(this).val(function(index, old) { return old.replace() + '%'; });
    });
</script>

• javascript
• php
• html
• forms

• 1 What have you tried so far? This is not a code-writing service. – mhodges Commented Jun 12, 2018 at 21:53
• does it have to be inside the input box? does it have to be at the end? does it have to only appear after the user starts typing? – user9487972 Commented Jun 12, 2018 at 21:53
• 1 sorry, won't click a *.ru link with a code attached... – Jeff Commented Jun 12, 2018 at 21:53
• 1 sorry, I forgot to add code:( First post updated – Philipp Kishkovarov Commented Jun 12, 2018 at 21:57
• @jeff sorry man, I thought joxi is enough popular screenshot service to post it here as support thing. I uploaded image right here – Philipp Kishkovarov Commented Jun 12, 2018 at 22:04

2 Answers 2

If you use Boostrap this should work :

<div class="input-group mb-3">
  <input type="text" class="form-control" aria-label="">
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>

https://jsfiddle/uv9s6q02/

Seeing the code would help, but you can test to see if the user has typed a number using regex.

input.addEventListener('keyup', () => {
  if (inputvalue.search(/\d/) > -1) { /* add % */ }
});