为什么我必须集中精力或按两分之一的方式按要继续

Question

我的脚本有问题。

当我通过箭头更改输入号码为上或向下值时，它应该计算另一个值。第一次还可以，但是我必须失去焦点(单击或按Enter(进行计算，否则我必须等待几秒钟...

这是我的.js：

$(document).ready(function(){
    calcul_prix();
    $("#largeur_conf").change(function(){
        calcul_prix();
    });
    $("#hauteur_conf").change(function(){
        calcul_prix();
    });
    $("#nb_rideaux_1").click(function(){
        calcul_prix();
    });
    $("#nb_rideaux_2").click(function(){
        calcul_prix();
    });    
});
function calcul_prix()
{
    verif_saisie();
    var largeur = parseInt(document.getElementById("largeur_conf").value);
    var hauteur = parseInt(document.getElementById("hauteur_conf").value);
    var nb_rideaux = parseInt(document.querySelector('input[name="nb_rideaux"]:checked').value);
    prix_confection = largeur * nb_rideaux;
    $('#prix_final').text(formatCurrency(prix_confection, currencyFormat, currencySign, currencyBlank));
}
function verif_saisie()
{
    var largeur = parseInt(document.getElementById("largeur_conf").value);
    var hauteur = parseInt(document.getElementById("hauteur_conf").value);
    if(largeur > 500 || largeur < 50) 
    {
        document.getElementById("largeur_conf").value = 50;
    }
    if(hauteur > 500 || hauteur < 50) 
    {
        document.getElementById("hauteur_conf").value = 50;
    }
}

Answer 1

这就是change事件的工作方式。根据MDN，该事件是针对类型文本的input元素触发的，...

...当元素更改后元素失去焦点

时

改用input事件：

当更改<input>，<select>或<textarea>元素的值时，DOM输入事件是同步触发的

此事件独立于通过键盘，上下文菜单，鼠标(例如Drag-Drop(或其他设备进行更改。

您还可以改进代码：

• 使用jQuery语法代替document.getElementById
• 将选择器组合成一个
• 传递函数参考而不是将一个函数调用在匿名函数中
• 使用Unary Plus转换为数字

代码：

$(function() {
    calcul_prix();
    $("#largeur_conf, #hauteur_conf").on('input', calcul_prix);
    $("#nb_rideaux_1, #nb_rideaux_2").click(calcul_prix);
});
function calcul_prix() {
    verif_saisie();
    var largeur = +$("#largeur_conf").val(),
        hauteur = +$("#hauteur_conf").val(),
        nb_rideaux = +$('input[name="nb_rideaux"]:checked').val();
    prix_confection = largeur * nb_rideaux;
    $('#prix_final').text(formatCurrency(prix_confection, currencyFormat, currencySign, currencyBlank));
}
function verif_saisie() {
    var largeur = +$("#largeur_conf").val(),
        hauteur = +$("#hauteur_conf").val();
    if (largeur > 500 || largeur < 50) {
        $("#largeur_conf").val(50);
    }
    if (hauteur > 500 || hauteur < 50) {
        $("#hauteur_conf").val(50);
    }
}

请注意，您将无法输入低于50的值，因为您的代码将立即将其设置为50。如果您在这种情况下不将值设置为50，那就更好了，而只是显示错误消息。这样，用户仍然可以输入以1位数字开始的数字。