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

Posted 2023-03-05

【中文标题】如何进行 HTML 数字输入，将其值转换为十分之一（可能使用 jQuery）

【英文标题】：How to make an HTML number input that transforms its value to tenths (possibly using jQuery)

【发布时间】：2020-07-12 23:26:54

【问题描述】：

假设我有一个像这样的输入字段

<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) 所预期的那样。

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

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

【参考方案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' />