Question

我在滑块下方有一个输入，显示滑块的值。移动滑块时，输入显示货币格式的图形。我还允许用户输入数字，滑块也会相应调整。

除enter键以外的所有功能都不能用于激活手动字段更改。

以下HTML显示位于滑块下的输入，如下所示：

<table class="transaction-calculations">
    <tbody>
        <tr>
            <td class="invoice-slider invoice">
                <input type="range" name="avg_tran_slider" class="wpcf7-form-control wpcf7-range form-control" id="avg_tran_slider" min="0" max="50000" value="150"><br/>
            </td>
        </tr>
        <tr>
            <td class="invoice-slider">
                <input type="text" id="avg_tran" class="slider-calculator-figure" value="$150.00"/>
            </td>
        </tr>
    </tbody>
</table>

我用JS格式化其内容：

/** select input contents when activated **/
jQuery("#avg_tran").focus(function() {
    jQuery(this).select();
});

/** set slider position from manually entered value **/
jQuery("#avg_tran").blur(function() {

    monthly_invoice_value = jQuery(this).val();
    monthly_invoice_value = parseFloat(monthly_invoice_value.replace(/[^0-9-.]/g, ''));

    if(isNaN(monthly_invoice_value)) {
        jQuery("#avg_tran").val("$0.00");
        jQuery("#avg_tran_slider").val(0);
    } else {

        if(monthly_invoice_value > 50000) {
            jQuery("#avg_tran").val("$50,000.00");
            jQuery("#avg_tran_slider").val(50000);          
        } else {
            jQuery("#avg_tran").val(formatMoney(monthly_invoice_value));
            jQuery("#avg_tran_slider").val(monthly_invoice_value);
        }
        calculateCosts();
    }
});

/** set input value from slider change **/
jQuery("#avg_tran_slider").on("change mousemove", function() {
    monthly_invoice_value = jQuery(this).val();
    jQuery("#avg_tran").val(formatMoney(monthly_invoice_value));
    calculateCosts();
});

除了在手动更改字段值时无法点击enter以外，所有内容都能正常运行，因为它不会“解散”＃34;该字段并激活blur代码。

我错过了什么（除了现在的几个大理石！）。谢谢！

Answer 1

如果要执行某些代码，可以在输入中聆听enter键。

jQuery("#avg_tran").keypress(function(event) {
    var code = event.keyCode || event.which;

    // 13 = key code of enter
    if (code == 13) {
        // Do something. Probably trigger the blur event in your case
        jQuery("#avg_tran").blur();
    }
});

Answer 2

试一试：

jQuery("#avg_tran").keypress(function(event) {
        var code = event.keyCode || event.which;

        // 13 = key code of enter
        if (code == 13) {
            // Do something. Probably trigger the blur event in your case
            jQuery('#avg_tran_slider').val(jQuery("#avg_tran").val());
            jQuery("#avg_tran").blur();
        }
    });

输入键在输入字段上不执行任何操作

2 个答案: