一起使用 onchange() 和 onkeypress() 的问题答案

【问题标题】：Issues using onchange() and onkeypress() together一起使用 onchange() 和 onkeypress() 的问题
【发布时间】：2013-04-29 13:45:26
【问题描述】：

我有一个输入需要是数字，并且需要在值更改时更新标签。

<input id="shares" name="shares" type="text" maxlength="3" onchange="game_board.update_shares(this);this.oldvalue = this.value;" onkeypress="return game_board.isNumberKey(event)">

需要onkeypress功能保证用户只能输入数字，onchange会用新信息更新我的label。

onkeypress 功能很好用，我只能输入数字。然而，onchange 函数什么也没做。

验证函数：

this.isNumberKey = function(evt){
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 
  && (charCode < 48 || charCode > 57)){
   return false;
  }

return true;};

更新功能：

this.update_shares = function(o){
alert("test");
$(".dollar_amount").html("$" + "value" + ".00");};

【问题讨论】：

jQuery 会做所有需要的翻译，evt.which 就足够了。

标签： javascript jquery html

【解决方案1】：

既然您使用的是 jQuery，那么您不妨也使用 jQuery 事件处理程序：

HTML

<input id="shares" name="shares" type="text" maxlength="3" />
<div class="dollar_amount"></div>

$("#shares").on("keydown", function (evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
});

$("#shares").on("change", function () {
    var o = $(this).val();
    $(".dollar_amount").html("$" + o + ".00");
});

工作示例：http://jsfiddle.net/charlescarver/e43pE/1/

这符合您的需要吗？还是需要保留this.update_shares = function(o)？

【讨论】：

哇，看起来 Jquery 比我想象的要多得多。大声笑谢谢你。
好的，我遗漏了一些东西。如果这段代码在外部文件中，它的工作方式是否会有所不同？我不这么认为，但现在这两个功能都不起作用。这也可能无关紧要，“.dollar_amount”在对话框中。
由于它是 jQuery，您需要将该代码放入 $(document).ready() 函数中。所以，如果是在外部文件中，首先在上面的代码之前包含jQuery文件，然后包含上面包裹在$(document).ready()中的代码。
哇。我仍然有问题。看起来它回到了绘图板上。再次感谢您的帮助。
我不太确定，我现在无法访问 java 脚本控制台来确定发生故障的位置。我会在大约2小时内。如果我仍然有问题，我会尽快告诉你。但是，不是函数的行为就像它们没有被正确调用一样。很可能我做错了什么。我靠 console.debug 功能生活。我会让你知道会发生什么。感谢您的帮助。

【解决方案2】：

因此，您需要在值更改时更新标签。如果我是你，我会在按键事件中这样做。我的意思是，类似：

this.isNumberKey = function(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)){
        return false;
    }
    $(".dollar_amount").html("$" + "value" + ".00");};
    return true;
};

【讨论】：

问题是我需要更新不同于验证。感谢您的帮助。