input floating suffix

by Noir Noir

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="field">
  <div class="unit-box">
    <p class="text"></p>
    <p class="space"></p>
    <p class="unit">Р</p>
  </div>
  <input type="text">
</div>

SCSS

.field {
  position: relative;
  width: 300px;;
  
  .unit-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    text-align: center;
    
    .text,
    .unit,
    .space{
      padding: 0;
      margin: 0;
      display: inline-block;
    }
    
    .text {
      color: transparent;
    }
    
    .unit {
      font-weight: bold;
      color: #ccc;
    }
    
    .space {
      width: 10px;
    }
  }
  
  input {
    width: 100%;
    position: relative;
    background: none;
    text-align: center;
  }
}

JavaScript

$(document).ready(function(){
	let backgroundText = $('.field .unit-box .text');
	$(document).on('input', '.field input', function(){
  	backgroundText.text($(this).val());
  });
});