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

Question

假设我有一个像

这样的输入字段

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

我想在此实现的是，我在此字段中输入的数字被视为 "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).[=24 所预期的那样=]

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

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

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

How to make an HTML number input that transforms its value to tenths (possibly using jQuery)

html

javascript

jquery

html-input