根据输入到文本框中的文本突出显示/选择图像

Question

我正在寻找一个示例，根据文本框中输入的输入，从几个图像中选择/高亮显示/稍微放大。例如，在下面的情况下，随着信用卡号码的输入，相应地选择/突出显示适当的徽标。

维萨-万事达- <==图像

|________________________| <==卡号码文本框

我本人并不是一个前端开发人员，但我认为JavaScript/jQuery是实现上述功能的合适技术吗？该页面是用ASP.NET MVC编写的。

我很感激你的指点。

干杯,

Answer 1

太棒了，谢谢！

这就是我最后要做的事。我觉得这可能对别人有用。

        function checkCCNo() {
        var cardimg;
        var cctx = document.getElementById("ccno");
        switch (cctx.value.substring(0, 1)) {
        case "4":
            cardimg = document.getElementById("visa");
            break;
        case "5":
            cardimg = document.getElementById("mastercard");
            break;
        }
        if (cardimg) { // Highlight the approprite credit card image
            $(cardimg).css({ "background-color": "", "opacity": "" });
            $(cardimg).css("border", "solid 2px silver");
            $(cardimg).animate({ width: "40px" }, "fast");
        }
        // Fade out the other credit card images
        var cardimgArr = ["visa", "mastercard"];
        for (var i = 0; i < cardimgArr.length; i++) {
            var image = "#" + cardimgArr[i];
            if (cardimg == undefined || cardimg.id != $(image).attr("id")) {
                $(image).css("border", "none");
                $(image).animate({ width: "36px", opacity: 0.5 }, "fast");
            }
        }
    }

如果有人对如何改进代码有建议的话，我很感激能听到它。

干杯,

Answer 2

您可以做一些简单的事情，比如在图像周围添加一个小边框。您可以检测卡类型的起始号码.5是万事达.4是Visa等，并突出显示适当的图像。

您可能希望为每个图像提供一个唯一的ID属性和一个类，这样您就可以同时对所有图像进行样式设置。例如：

编辑:有一些bug。必须通过身份证明。修正.

<img id="mc" class="cc" src="mastercard.jpg" />
<img id="visa" class="cc" src="visa.jpg" />
<input id="ccno" type="text" oninput="checkCCNo('ccno');" />

您的css可以是：

.cc {
    display: inline-block;
    margin: 5px;
}

然后，您的JavaScript将是：

function checkCCNo(id){
    var cardimg;
    var source = document.getElementById(id);
    switch (source.value.substring(0,1)){
        case "4":
            cardimg = document.getElementById("visa");
            break;
        case "5":
            cardimg = document.getElementById("mc");
            break;
    }
    if(cardimg) {
        cardimg.style.borderStyle = "solid";
        cardimg.style.borderColor = "red";
        cardimg.style.borderWidth = "2px";            
    }
}

您可以添加额外的卡，只需添加更多的情况。如果不想增加边框以突出显示，只需在最后一个If块中更改所做的操作，例如交换出图像等。

如果您愿意，也可以使用此函数对卡号进行一些验证。