javascript - 如何制作一个 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);
});

但这并不总是按预期工作(例如，当我在原始输入中退格时，会附加而不是删除一个数字，正如使用 .slice(-1) 所预期的那样。

什么是实现预期行为的好方法，我试图避免显式绑定(bind)所有按键，从而实质上重新编程输入字段(除非这是实现这一目标的唯一方法)。

$('#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

高兴时将不透明度从 0.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' />