Question

我正在尝试让网页在文本字段失去焦点时更新值。我已经为onblur事件尝试了许多不同的建议变体，但似乎没有任何像预期的那样工作。目前我在第59行的html代码中有onblur

<input name="qty1" id="qty1" size="8" value="0" onBlur="productCost()" />

我也试图在剧本中进行修正。

function productCosts（）

{
    var totalMap = document.getElementById("qty1").onblur();
    totalMap.value = ("qty1") * ("price1");
    //$("#cost1").html (totalMap.toFixed(2));
    alert(totalMap)

    //var totalPlanner = ('qty2') * ('price2');
    //var totalHiker = ('qty3') * ('price3');
}

我创造了一个小提琴来展示整个节目。 http://jsfiddle.net/Jn6LQ/任何帮助都会非常感激。

Answer 1

注意：在下面，$ 不是 jQuery，OP正在将其用作getElementById的快捷方式。

该行

totalMap.value = ("qty1") * ("price1");

将字符串 "qty1"与字符串 "price1"相乘。也许您打算查找元素，然后获取它们的值：

totalMap.value = $("qty1").value * $("price1").value;

另外，使用onXyz属性通常不是最佳做法。代替：

$("qty1").onblur = productCosts;
$("price1").onblur = productCosts;

function productCosts() {
    var value = $("qty1").value * $("price1").value;
    $("cost1").innerHTML = value.toFixed(2);
}

（我假设价格也可以改变，但页面上的情况可能并非如此。）

但是，看看这个小提琴，你有一个更大的问题：你想为多行做到这一点。使用id值来实现这一目标将会产生过于丰富的过大代码。相反，在每个输入上使用一个类，然后使用它们在同一行中的事实将它与行中的其他输入相关联。

function productCosts() {
    var row   = this.parentNode.parentNode,
        qty   = row.querySelector(".qty"),
        price = row.querySelector(".price"),
        cost  = row.querySelector(".cost"),
        value = qty.value * price.value;
    cost.innerHTML = value.toFixed(2);
}

var list, i;
list = document.querySelectorAll(".qty, .price");
for (i = 0; i < list.length; ++i) {
    list[i].onblur = productCosts;
}

Answer 2

使用jQuery很容易

$('#qty1').bind('blur', productCosts)

或使用JS

document.getElementById('qty1').addEventListener('blur', productCosts)

Answer 3

jQuery.blur（）看起来像你正在寻找的东西：

$('#qty1').blur(function(){
    alert('here');
});

使用模糊调用函数

3 个答案: