基于另一个具有百分比的输入自动完成一个输入

Autocomplete an Input based on another Input with Percentages

本文关键字：输入 一个 另一个 百分比      更新时间：2023-09-26

首先，如果我遗漏了任何信息或不清楚，请原谅，我在这方面很新，仍在掌握窍门。

我有以下表格：

表单

我需要2%的输入字段来自动完成，所以总和是100%。如果输入1为90%，则输入2应自动完成到10%，反之亦然

这是HTML:

<!-- Tabla - - - - - - - -->
<div id="distDosFondos" class="table-responsive cambioDist">
    <p>Selecciona fondos y porcentajes a distribuir:</p>
    <!--table-responsive-->
    <table class="table">
        <thead>
            <tr>
                <th>Fondo</th>
                <th>%</th>
            </tr>
        </thead>
        <tbody>
        <!-- Fila Cambio y Distribución de Fondos -->
            <tr>
                <td>
                    <div class="inputForm">
                        <select class="chosen" id="fondos1" name="fondos1">
                            <option value="">Fondo</option>
                        </select>
                    </div>
                </td>
                <td>
                    <div class="inputForm">
                        <input id="porcentage1" name="porcentage" type="text" class="form-control porcentage porcentaje1">
                    </div>
                </td>
            </tr>
            <!-- //Fila Cambio y Distribución de Fondos -->
            <!-- Fila Cambio y Distribución de Fondos -->
            <tr>
                <td>
                    <div class="inputForm">
                        <select class="chosen" id="fondos2" name="fondos2">
                            <option value="">Fondo</option>
                        </select>
                    </div>
                </td>
                <td>
                    <input id="porcentage2" name="porcentage" type="text" class="form-control porcentage porcentaje2">
                </td>
            </tr>
            <!-- //Fila Cambio y Distribución de Fondos -->
        </tbody>
    </table>
</div>
<!-- Tabla - - - - - - - -->

有很多方法可以实现这一点，但这是一个非常简单的解决方案。

首先，为两个输入的input事件设置一个处理程序

$("[name='porcentage']").on("input", function() {
    ...
});

现在，在其中，您将处理更改其他输入的问题。首先，让我们确保百分比不能超过100，也不能低于0。

if($(this).val() > 100)
    $(this).val(100);
else if($(this).val() < 0)
    $(this).val(0);

接下来，您需要获得另一个输入，即您想要更改的输入。

var otherInput = $(this).attr("id") == "porcentage1" ? $("#porcentage2") : $("#porcentage1");

最后，设置另一个输入的值，使两者相加为100。

$(otherInput).val(100 - $(this).val());

完整代码：

$("[name='porcentage']").on("input", function() {
    if($(this).val() > 100)
        $(this).val(100);
    else if($(this).val() < 0)
        $(this).val(0);
    var otherInput = $(this).attr("id") == "porcentage1" ? $("#porcentage2") : $("#porcentage1");
    $(otherInput).val(100 - $(this).val());
});

Fiddle

一种可能性是使用jQuery库：

$('#porcentage1, #porcentage2').on('input', function (event) {
        var inputValue = parseInt($(this).val());
        if (inputValue >= 0 && inputValue <= 100) { //ensure number is between 0 and 100
            var otherValue = 100 - inputValue;
            if (this.id === 'porcentage1') { //determines which input element was filled
                $('#porcentage2').val(otherValue);
            } else {
                $('#porcentage1').val(otherValue);
            }
        }
})

您可能需要使用其他验证/检查来确保用户实际上正在输入一个数字等。

没有jQuery:

// attach a bunch of events to both inputs to handle any kind of change
['change', 'keyup', 'paste'].forEach(function(event) {
    // .bind here essentially serves to pass reference of the current updated input, and the other input wich will be updated
    porcentage1.addEventListener(event, onPercentageChange.bind(null, porcentage1, porcentage2));
    porcentage2.addEventListener(event, onPercentageChange.bind(null, porcentage2, porcentage1));
});
function onPercentageChange(updatedInput, otherInput) {
    var updatedValue = parseInt(updatedInput.value) || 0;
    otherInput.value = 100 - updatedValue;
}

https://jsfiddle.net/tb7a7joc/

工作IE9+

相关文章：