Как правильно использовать не целые числа в инпуте?
Добрый день. Есть такой JavaScript:
$(document).ready(function () { const conversionFactors = { "Килограммы": 1, "Граммы": 0.001, "Тонны": 1000, "Центнер": 100, "Миллиграмм": 1e-6, "Сантиграмм": 0.01, "Микрограмм": 1e-9, "Килотонна": 1e6, "Килоньютон на Земле": 101.971621, "Ньютон на Земле": 0.101971621, "Карат": 0.0002, "Атомная масса": 1.66e-24, "Фунт": 0.45359237, "Унция": 0.028349523125, "Гран": 0.00006479891, "Стоун": 6.35029318 }; function convertToKilograms(value, unit) { if (conversionFactors[unit] !== undefined) { return value * conversionFactors[unit]; } return 0; } function updateUnitValues(sourceElement, sourceValue) { const parentRow = sourceElement.closest(".row.align-items-center"); const sourceLabel = parentRow.find(".custom-label").text(); const kilogramsValue = convertToKilograms(sourceValue, sourceLabel); $("input[type='text']").each(function () { const targetLabel = $(this).closest(".row.align-items-center").find(".custom-label").text(); const targetConversionFactor = conversionFactors[targetLabel]; if (typeof targetConversionFactor === "undefined") { $(this).val("0"); } else { const targetValue = kilogramsValue / targetConversionFactor; $(this).val(targetValue.toLocaleString()); } }); } $("input[type='text']").on("input", function () { const sourceValue = parseFloat($(this).val().replace(/[^d.]/g, '')); if (!isNaN(sourceValue)) { updateUnitValues($(this), sourceValue); } else { $("input[type='text']").val(""); } }); }); |
$(document).ready(function () { const conversionFactors = { "Килограммы": 1, "Граммы": 0.001, "Тонны": 1000, "Центнер": 100, "Миллиграмм": 1e-6, "Сантиграмм": 0.01, "Микрограмм": 1e-9, "Килотонна": 1e6, "Килоньютон на Земле": 101.971621, "Ньютон на Земле": 0.101971621, "Карат": 0.0002, "Атомная масса": 1.66e-24, "Фунт": 0.45359237, "Унция": 0.028349523125, "Гран": 0.00006479891, "Стоун": 6.35029318 }; function convertToKilograms(value, unit) { if (conversionFactors[unit] !== undefined) { return value * conversionFactors[unit]; } return 0; } function updateUnitValues(sourceElement, sourceValue) { const parentRow = sourceElement.closest(".row.align-items-center"); const sourceLabel = parentRow.find(".custom-label").text(); const kilogramsValue = convertToKilograms(sourceValue, sourceLabel); $("input[type='text']").each(function () { const targetLabel = $(this).closest(".row.align-items-center").find(".custom-label").text(); const targetConversionFactor = conversionFactors[targetLabel]; if (typeof targetConversionFactor === "undefined") { $(this).val("0"); } else { const targetValue = kilogramsValue / targetConversionFactor; $(this).val(targetValue.toLocaleString()); } }); } $("input[type='text']").on("input", function () { const sourceValue = parseFloat($(this).val().replace(/[^d.]/g, '')); if (!isNaN(sourceValue)) { updateUnitValues($(this), sourceValue); } else { $("input[type='text']").val(""); } }); });
Есть инпуты, в которые пользователь вводит данные и они автоматически считаются и отображаются (перевод единиц измерения). Всё работает за исключением не целых чисел. Если я пытаюсь ввести после числа точку или запятую ничего не происходит.
Если я ввожу 14, а потом между ними ставлю запятую получается 1,4 и расчёты идут корректно. Если я добавляю 5, (хочу получить 1,45) тогда режется запятая и я получаю 145. Помогите поправить код, чтобы не целые числа работали и считались корректно.
Если я заменяю регулярку на
const sourceValue = parseFloat($(this).val().replace(/[^d.,]/g, '')); |
const sourceValue = parseFloat($(this).val().replace(/[^d.,]/g, ''));
то есть добавляю запятую, тогда вообще становится неадекватное поведение у скрипта и он стирает данные при вводе и не дает ввести более 4 символов.
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для использования нецелых чисел в инпуте HTML вы можете использовать атрибут `step` вместе с типом `number`. Атрибут `step` позволяет определить шаг изменения числа при его увеличении или уменьшении.
Пример использования нецелых чисел в инпуте:
В данном примере мы создали инпут типа `number`, который позволяет вводить числа с плавающей точкой. Атрибут `step="0.1"` указывает, что шаг изменения числа будет равен 0.1.
Также, вы можете использовать атрибут `min` и `max` для определения минимального и максимального значения, которое пользователь может ввести.
Если вам необходимо использовать нецелые числа в форме для отправки на сервер, убедитесь, что вы обрабатываете эти значения правильно на стороне сервера, например, с помощью PHP:
$number = $_POST['number']; // Преобразование строки в число с плавающей точкой $floatNumber = floatval($number);
Таким образом, вы можете использовать нецелые числа в инпуте HTML и корректно обрабатывать их на стороне сервера.