Знак процента в форме ввода

Question

Нужна помощь, чтобы знак "%" автоматически отображался в моем поле ввода, когда пользователь вводит номер

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

как здесь: Если пользователь введет какое-то число, оно будетвсегда добавляйте знак "%" в поле зрения.Вероятно, следует использовать некоторые JS, но я еще не знаком.

Я пробовал этот способ, но он работает для каждого ввода

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

Answer 1

Если вы используете Boostrap, это должно работать:

<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.net/uv9s6q02/

Answer 2

Просмотр кода поможет, но вы можете проверить, набрал ли пользователь число с помощью регулярного выражения.

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