Question

我的项目中有以下dynamic input html

  $(this).html("<input type='text' style='width:35px;' value='" + $(this).text() + "' />");

现在我尝试在上面的输入文字字段中添加验证仅使用数字。

但是刚接触jquery 我想知道我如何添加keypress事件

想要使用以下验证

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

我尝试了以后但似乎没有工作

$(this).html("<input type='text'  onkeypress='return isNumber(event)' style='width:35px;' value='" + $(this).text() + "' />");

修改

为仅使用数字

添加验证的任何其他方式

Answer 1

使用 event delegation

$(document).on("keypress","input[type=text]",isNumber);

// $(document) use closest parent for this

事件委托允许我们将单个事件监听器附加到父元素，将为匹配a的所有后代触发选择器，无论这些后代现在存在还是被添加到将来

Answer 2

我的猜测是，您在父元素（如click。）的情况下执行共享代码。

因此，当您单击文本框时，单击（或类似事件）将冒泡到其父级，从而触发使用新文本框替换文本框的处理程序。

您可以通过调用文本框的事件对象stopPropagation()的{{1}}方法来阻止它，如下所示：

onclick

Demo

Answer 3

使用type="number"

$(this).html("<input type='number' style='width:35px;' value='" + $(this).text() + "' />");

您还可以对接受的号码设置限制：

见W3School Input Type: number

在动态html上添加Keypress / keydown事件

3 个答案: