如何制作一个 HTML 数字输入，将其值转换为十分之一（可能使用 jQuery）

Question

假设我有一个输入字段，例如

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

我想要实现的目标是将我放入该字段的数字视为“十分之一”而不是整数，例如：

• 当我在此输入字段中输入 a 时3，我希望该字段的值为0.3

• 之后，当我输入 a 时5，我希望该值变为3.5

• ...然后 a 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).

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

$('#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) {&nbsp; $('#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' />