onkeyup事件在含数字的ID元素上失效问题求助

其实你的问题和「带数字的ID」完全没关系——咱们来仔细看你提供的代码：

在你所谓的「问题代码」里，第一个输入框的ID还是fname，但你在onkeyup事件里传给myFunction的参数却是'fname1'；第二个输入框ID是lname，参数却是'lname1'。这就导致document.getElementById(ele)根本找不到对应的元素，自然拿不到输入值，看起来事件就「失效」了。

HTML里的ID是允许包含数字的（只要不是纯数字或数字开头，HTML5甚至放宽了这个限制），所以数字本身不是问题，核心是你传递的ID参数和元素实际的ID不匹配。

解决方案1：修正ID与参数的匹配 #

把输入框的ID改成和你传递的参数一致即可，比如：

<html> 
<body> 
Enter your firstname: <input type="text" id="fname1" onkeyup="myFunction('fname1')"> 
<br/>Enter your lastname: <input type="text" id="lname1" onkeyup="myFunction('lname1')"> 
<p>My name is: <span id="demo"></span></p> 
<script> 
function myFunction(eleId) { 
    var x = document.getElementById(eleId).value; 
    document.getElementById("demo").innerHTML = x; 
} 
</script> 
</body> 
</html>

解决方案2：直接传递元素本身（推荐，适合动态生成场景） #

既然你是动态生成元素，其实完全不用传递ID，直接把当前元素this传给函数，这样函数里可以直接读取元素的value，不用再通过ID查找，更省心也不容易出错：

<html> 
<body> 
Enter your firstname: <input type="text" id="fname1" onkeyup="myFunction(this)"> 
<br/>Enter your lastname: <input type="text" id="lname1" onkeyup="myFunction(this)"> 
<p>My name is: <span id="demo"></span></p> 
<script> 
function myFunction(ele) { 
    var x = ele.value; 
    document.getElementById("demo").innerHTML = x; 
} 
</script> 
</body> 
</html>

这种方式在动态生成大量元素时特别好用，你不用再费心管理每个元素的ID命名，直接绑定事件时传this就行。

内容的提问来源于stack exchange，提问作者Rouge