javascript - 无法通过 JavaScript 转换在文本框中输入浮点值

Question

在下面的代码中，即使用户键入正值，我也需要为文本设置负数。效果很好。

但是它不允许我输入浮点值。当我尝试从键盘输入小数点时，它不允许。那是因为我取的是绝对值。

有人知道怎么解决这个问题吗？用户还应该能够输入浮点值，例如 34.50。我哪里出错了，应该如何纠正？

$('#loss').bind("keyup blur", function() {
  var a = Math.abs(Number($(this).val()));
  var c = a * -1;
  $('#loss').val(c);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="loss" type="text" placeholder="type" style="border: none; text-align: center;" class="amt_num_box_reduce_space">

Answer 1

我同意 Rory 对您的问题的评论，您希望做的可能是不好的做法，但如果您坚持，这里有一个解决方案。

当您将值转换为 Number 时，您的 . 将被删除，因为它被视为字符串，因为它后面没有数字。

下面的代码检查末尾是否添加了句点，如果是，则在再次设置值时添加它。

现在请记住，如果用户输入字母、第二个句点等，您将会遇到问题。代码将返回 NaN 并且用户必须选择所有文本并替换它，因为退格键也不起作用。但是这个问题也存在于您的原始代码中。

$('#loss').bind("keyup blur", function() {
  var t = $(this);
  var value = t.val();
  var lastCharacter = value.substring(value.length-1);
  var hasPeriod = false;
  if (lastCharacter === '.') {
  	hasPeriod = true;
  } 
 
  var a = Math.abs(Number(value));
  var c = a * -1;
  
  t.val(c + (hasPeriod ? '.' : ''));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="loss" type="text" placeholder="type" style="border: none; text-align: center;" class="amt_num_box_reduce_space">

如果您删除了对 keyup 的验证并仅使用 blur，那么问题会更少，但再次在输入字段前面设置一个“减号”并转换必要时它会是理想的解决方案。