Невозможно ввести значения с плавающей запятой в текстовом поле с преобразованием 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

Я согласен с комментарием Рори по вашему вопросу, и то, что вы хотите сделать, может быть плохой практикой, но если вы настаиваете, вот решение.

Когда вы преобразуете свою ценность в a Number, ваш . будет удален, поскольку он считается строкой, так как после него нет номера.

Приведенный ниже код проверяет, был ли добавлен период в конце, и, если да, добавляет его при установке значение снова.

Имейте в виду, что у вас возникнут проблемы, если пользователь введет буквы, второй период и т. д. c. Код вернет 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, но снова, установив "минус" перед поле ввода и его преобразование при необходимости было бы идеальным решением.

Answer 2

Проблема здесь заключается в преобразовании типов Javascript. При вводе десятичной точки строковое значение «10». конвертируется в число 10, и позже вы перезаписываете введенное значение строкой «10» с потерянным десятичным знаком.

Может быть несколько подходов для решения этой проблемы, вы можете добавить знак минус, когда элемент управления вводом теряет фокус, но я бы порекомендовал использовать так называемые «Входные украшения», чтобы указать, что в этом поле хранится отрицательное число и фактически отменяет число во время обработки формы.