Запретить пользователю вводить несколько точек в поле ввода чисел

Question

У меня есть HTML-форма, где пользователь может ввести цену в одно из полей. Цена должна быть введена как плавающее число. Я хочу запретить пользователю вводить любой другой символ, отличный от числа или точки. До сих пор я был в состоянии сделать это с помощью некоторого кода JavaScript. Но проблема в том, что я могу ввести несколько точек, что делает значение цены недействительным. Конечно, числовое поле ввода обрабатывает это как ошибку и выдает сообщение об ошибке, но я хочу динамически ограничить ввод второй точки после ввода первой. Ниже вы можете увидеть мою функцию, которой я пользуюсь в данный момент.

Я пробовал следующее. Функция вызывается при каждом нажатии клавиши пользователя. Моя идея состояла в том, чтобы получить значение, введенное до сих пор в числовое поле и, если точка уже присутствует, пропустить ввод пользователя. Но кажется, что числовое поле ввода не возвращает текущее значение, используя функцию val (). Возвращает пустую строку. Даже функции text () и html () не возвращают введенный текст.

Функция, которую я имею до сих пор:

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    var text = $('#price_value').val();
    var isDecimalPresent = text.indexOf(".");
    if (charCode === 46 && isDecimalPresent > -1) {
        return false;
    }
    if (charCode > 31 && (charCode !== 46 && (charCode < 48 || charCode > 57))) {
        return false;
    }
    return true;
}

Поле ввода:

<input type="number" step="0.01" id="price_value" autocomplete="off" value="0.0" onkeypress="return isNumberKey(event)">

Я ожидаю, что когда пользователь вводит одну точку, затем пытается ввестидругая точка, нажатие клавиши игнорируется, а вторая не вводится в числовое поле, оставляя только допустимое значение.