Как добавить знак валют при вводе значения в input?

Question

[In_hape]

Есть следующий код HTML

<form class="search-form">
  <div class="form-row">
    <input class="input-suma-credit" type="text" name="suma-credit" inputmode="decimal" autocomplete="off">
  </div>
</form>

и JS

$('body').on('input', '.input-suma-credit', function(){
		this.value = this.value
			.replace(/\D/g, '')
		    .replace(/(\d)(?=(\d{3})+([^\d]|$))/g, '$1 ')
		    + ' ₽';
	});

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


Не совсем понятно как именно реализовать данный момент, буду рад если сможете подсказать или хотябы направить в правильном направлении.

Comments

[Danny Arty]

самое простое и имхо верное решение, не добавлять его в инпут, а указать в условно отдельном span-е.

Answer 1

[Дмитрий Дерепко]

Зачем его вставлять в input?
Сделайте отдельный span/i/div/что хотите и состыкуйте его к input. И данные в контроле будут чистыми, и никаких проблем с перескакиванием курсора за символ.

Comments

[In_hape]

Да я тоже об этом думал. Но поскольку только начмнаю изучать js, не могли бы вы подсказать как реализовать момент: чтобы div появлялся только после того как пользователь ввел хотя бы одни символ (число в даном случае) ?

Answer 2

[Сергей Сергей]

function(){
    this.value = this.value
      .replace(/\d $/, '')
      .replace(/\D/g, '')
      .replace(/(\d)(?=(\d{3})+([^\d]|$))/g, '$1 ')
    + ' ₽';
}