在动态HTML上添加Keypress/keydown事件
在动态HTML上添加Keypress/keydown事件
我在项目中有以下的动态输入html代码：
$(this).html("");
现在我想要为上述输入文本框添加只能输入数字的验证，但是由于对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("");
编辑：
还有其他方法可以添加只能输入数字的验证吗？
问题的原因是在动态生成的HTML元素上添加keypress/keydown事件时，使用了type="number"属性。然而，这个属性在Internet Explorer 9及更早的版本中不被支持。
解决方法是使用其他能够兼容所有浏览器的方式来实现相同的功能。可以使用元素，并通过JavaScript代码来限制只能输入数字。
以下是一种可能的解决方法：
$(this).html("");
$(this).find("input").keypress(function(event) {
var charCode = (event.which) ? event.which : event.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
});
这段代码将动态生成一个文本输入框，并将原来的值作为默认值。然后，通过使用keypress事件和键盘码来限制只能输入数字。如果输入的字符不是数字，就返回false，阻止字符的输入。
通过这种方式，无论是在哪个浏览器上，都可以实现类似type="number"的功能，并能够正确处理用户的输入。
问题的原因是当点击文本框时，点击事件会冒泡到父元素，触发替换文本框的处理程序。解决方法是在文本框的onclick事件中调用event对象的stopPropagation()方法来阻止事件冒泡。以下是示例代码：
$("#container").click(function () {
$(this).html("");
});
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;
}
以上代码中，当点击id为"container"的元素时，会将其内容替换为一个带有onkeypress和onclick事件的文本框。其中onclick事件调用了event.stopPropagation()方法来阻止事件冒泡。isNumber函数用于判断输入的字符是否为数字。
希望以上代码能够解决你的问题。如果还有其他问题，请参考这个链接。
