我想知道是否有一种方法可以使用 JavaScript onChange 事件根据在表单的文本框中键入的数字来更改图像的 SRC。例如，如果用户键入一个以数字 3 开头的数字，我希望 SRC 指向一个图像，但如果用户键入一个以数字 4 开头的数字，我希望 SRC 指向一个不同的图像，当用户输入以 5 开头的数字或以 6 开头的数字时，我希望其他 SRC 发生变化。
提前致谢！
【问题讨论】：
change 事件在文本框失去焦点之后才会被触发。您可能想改用onkeydown。
标签： javascript image textbox onchange
下面我提供了一个完整的评论example，说明如何做到这一点。
html
<input id="myid" type="text">
<img id="myimg" src="http://dummyimage.com/100x100/000/fff">
javascript
window.onload = function() { // because we are grabbing DOM elements we need to ensure the elements are first loaded.
var elm = document.getElementById("myid"),
img = document.getElementById("myimg"); // here we grab the input box and the image
elm.onkeyup = function(event) { // capture the input keyup
if (this.value.length === 1) { // make sure we are only checking the first value
switch (event.keyCode) { // here we are running the switch statement against the keyup event keycode value
case (48):
img.src = "http://dummyimage.com/100x100/000/fff&text=0";
break;
case (49):
img.src = "http://dummyimage.com/100x100/000/fff&text=1";
break;
case (50):
img.src = "http://dummyimage.com/100x100/000/fff&text=2";
break;
case (51):
img.src = "http://dummyimage.com/100x100/000/fff&text=3";
break;
case (52):
img.src = "http://dummyimage.com/100x100/000/fff&text=4";
break;
case (53):
img.src = "http://dummyimage.com/100x100/000/fff&text=5";
break;
case (54):
img.src = "http://dummyimage.com/100x100/000/fff&text=6";
break;
case (55):
img.src = "http://dummyimage.com/100x100/000/fff&text=7";
break;
case (56):
img.src = "http://dummyimage.com/100x100/000/fff&text=8";
break;
case (57):
img.src = "http://dummyimage.com/100x100/000/fff&text=9";
break;
}
}
}
}
【讨论】：
img.src = "whatever" 随便你想显示的图片地址。
谢谢大家的帮助。
:)
这是我开发的最终解决方案。我使用了 onkeyup 事件，因为它更适合我的需要。我使用的 HTML：
<form name="AddCardToAccount" id="AddCardToAccount" action="" method="post">
<img id="imgCC" name="imgCC" class="imgCC" src="/includes/sci/images/imgNoCC_.gif">
<input type="text" name="cardNumber" id="cardNumber" size="31" onkeyup="handleKeypress(this,event);">
除了键盘的数字之外，我还添加了一些案例编号来覆盖键盘的数字。这是我使用的 JavaScript：
function handleKeypress(inCardNumber,e) {
var inCardNumber = document.AddCardToAccount.cardNumber;
var imgToSwap = document.AddCardToAccount.imgCC;
var charCode;
if(e && e.which){
charCode = e.which; // For Firefox
}
else if(window.event){
e = window.event;
charCode = e.keyCode; // For IE
}
if (inCardNumber.value.length === 1) {
switch (charCode) {
case (48):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (49):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (50):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (51):
imgToSwap.src = "includes/sci/images/imgAmexCC_.gif";
break;
case (52):
imgToSwap.src = "includes/sci/images/imgVisaCC_.gif";
break;
case (53):
imgToSwap.src = "includes/sci/images/imgMcCC_.gif";
break;
case (54):
imgToSwap.src = "includes/sci/images/imgDiscCC_.gif";
break;
case (55):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (56):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (57):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (96):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (97):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (98):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (99):
imgToSwap.src = "includes/sci/images/imgAmexCC_.gif";
break;
case (100):
imgToSwap.src = "includes/sci/images/imgVisaCC_.gif";
break;
case (101):
imgToSwap.src = "includes/sci/images/imgMcCC_.gif";
break;
case (102):
imgToSwap.src = "includes/sci/images/imgDiscCC_.gif";
break;
case (103):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (104):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (105):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
}
}
}
【讨论】：