Ввод округляется / заменяется на следующий кратный при keyup

Question

Сначала у меня два входа, когда я набираю число от 0 до 1,53. Я хочу автоматически заменить его на 1,53, когда я набираю 1,54, я хочу заменить его на 3,06, потому что (1,53 + 1,53) = 3,06 и т. Д. Я использую Math.ceil() но я не знаю, как поставить это значение для ввода?

Немного больше объяснений:

<p>if first input range between 0 - 1.53 result first input = 1.53, second input = 1</p>
<p>if first input range between 1.54 - 3.06 result first input = 3.06, second input = 2</p>
<p>if first input range between 3.06 - 4.59 result first input = 4.59, second input = 3</p>
    <div class="input-box col-sm-12">
        <label>in this input result supposed to round up to next multiple like 1.53 and 3.06 and 4.59...</label><br/>
        <input type="text" value="" id="product_val" autocomplete="off">
    </div>
    <div class="input-box col-sm-12">
        <label>second input</label><br/>
        <input type="number" value="" id="products_packs" autocomplete="off" disabled>
    </div>

и JS:

$(document).ready(function() {
var packSize = 1.53,
    packPrice = 35;
$('#product_val').keyup(function() {
    var area2 = $(this).val().replace(',', '.');
        var area = (Math.ceil(area2 / packSize) * packSize);
    var packs = Math.ceil(area / packSize);
    setPrice(packs * packPrice); 
    setPacks(Math.ceil(area / packSize)); 
});
$('#products_packs').keyup(function() {
    var packs = $(this).val();
    setPrice(packPrice * packs); 
    setArea(packSize * packs); 
    setPacks(packs);
});
function setArea(value) {
    $("#product_val").val(value);
}
function setPacks(value) {
    $("#products_packs").val(value);
    $("#quantity_wanted").val(value);
}
function setPrice(value) {
    $("#products_price").text($("#products_price").text().replace(/[0-9\.\,]+/, parseFloat(value).toFixed(2)));
}
});

Эта строка выполняет всю работу, но мне нужно заменить значение, введенное в первый ввод, результатами этой строки после остановки ввода var area = (Math.ceil(area2 / packSize) * packSize); как я могу это сделать?

Здесь работает скрипка https://jsfiddle.net/wzte04rj/1/

Answer 1

Взгляните на обновленную скрипку, она будет работать так, как вы ожидаете.

объяснение:

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

( Math.floor( inputValue / packSize ) + 1 ) * packSize;

но так как это простой алгоритм, есть много других вариантов. единственное, на что следует обратить внимание, это то, что над линией будет выдоку 3.06 с вводом 1,53; Таким образом, мы должны отменить расчеты (написать return выражение) до if заявление, если значение уже было packSize, лайк:

var divider = inputValue / packSize;

if ( divider == ~~divder )
    return;

( Math.floor( inputValue / packSize ) + 1 ) * packSize;

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

веселиться <3

Answer 2

Ответ на эту версию вопроса:

я меняю area, packs а также setPacks в $('#product_val').keyup - вот jsfiddle:

$('#product_val').keyup(function() {
    var area2 = $(this).val().replace(',', '.');
    var area = Math.ceil(area2 / packSize);
    var packs = Math.ceil(area );
    setPrice(packs * packPrice); 
    setPacks(packSize * area); 
});