Как сделать числовой ввод HTML, который преобразует его значение в десятые доли (возможно, используя jQuery)

Question

Допустим, у меня есть поле ввода, например

<input type='number' id='input-tenths' />

Чего я хочу добиться в этом, так это то, что цифры, которые я помещаю в это поле, обрабатываются как «десятые» вместо целых чисел, например:

• Когда я ввожу 3 в это поле ввода, я хочу, чтобы значение поля было 0.3
• Когда после этого я ввожу 5 Я хочу, чтобы значение стало 3.5
• ... затем 9, значение должно стать 35.9

Я до сих пор пытался добавить скрытый поле <input type='hidden' id='hidden-tenths'/> и такая функция, как

$('#input-tenths').on('input', function(e){
    $('#hidden-tenths').val($('#hidden-tenths').val() + '' + $(this).val().slice(-1));
    $(this).val($('#hidden-tenths').val() / 10);
    $('#hidden-tenths').val($(this).val() * 10);
});

, но это не всегда работает должным образом (например, когда я возвращаюсь в исходный ввод, ди git добавляется, а не удаляется, как можно ожидать от использования .slice(-1).

Что было бы хорошим способом для достижения ожидаемого поведения, где я стараюсь держаться подальше от явного связывания всех нажатий клавиш и, таким образом, по существу перепрограммируем поле ввода (кроме случаев, когда это единственный способ добиться этого).

$('#input-tenths').on('input', function(e) {
  $('#hidden-tenths').val($('#hidden-tenths').val() + '' + $(this).val().slice(-1));
  $(this).val($('#hidden-tenths').val() / 10);
  $('#hidden-tenths').val($(this).val() * 10);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='number' id='input-tenths' />
<input type='number' id='hidden-tenths' />

Answer 1

Измените непрозрачность с .3 до 0, когда счастлив. Вы можете подавить десятичные дроби

$('#hidden-tenths').on('input', function(e) {
  $('#input-tenths').val((this.value/10).toFixed(1))
});

#input-tenths { opacity:1; position:absolute; z-index:0; }
#hidden-tenths { opacity:.3; position:absolute; z-index:100; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='number' id='input-tenths' />
<input type='number' id='hidden-tenths' />