Unremovable currency symbol

by Dmitry Maximov

HTML

<div class="text-field">
  <input class="text-field__input" type="text" value="890" data-js--currency-input>
  <span class="text-field__currency" data-js--currency-symbol>&#8381;</span>
</div>

SASS

.text-field 
    font-family: Arial
    line-height: 1
    font-size: 16px
    position: relative

    &__currency 
        position: absolute
        z-index: 10
        top: 50%
        transform: translateY(-50%)
        pointer-events: none

    &__input
        font-family: Arial
        line-height: 1
        font-size: 16px

JavaScript

function currencyTransition() {
    var symbols = $('[data-js--currency-input]').val().length;
    $('[data-js--currency-symbol]').css('left', (symbols + 1) + 'ch');
}
currencyTransition();

$('[data-js--currency-input]').on('input', function () {
	currencyTransition();
    var thisValue = $(this).val();
    // var digits = thisValue.toString().replace(/[^\d]/gi, '');
    // $(this).val(digits);
	if ($(this).val() === '') {
        $(this).val('0');
        currencyTransition();
    }
});



$('[data-js--currency-input]').on('keydown', function () {
	if ($(this).val() == '0') {
        $(this).val('');
        currencyTransition();
    }
});



  $('[data-js--currency-input]').keydown(function(event) {
  
    // Разрешаем: backspace, delete, tab и escape
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 ||
      // Разрешаем: Ctrl+A
      (event.keyCode == 65 && event.ctrlKey === true) ||
      // Разрешаем: home, end, влево, вправо
      (event.keyCode >= 35 && event.keyCode <= 39)) {
      // Ничего не делаем
      return;
    } else {
      // Запрещаем все, кроме цифр на основной клавиатуре, а так же Num-клавиатуре
      if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
        event.preventDefault();
      }
    }
  });