根据文本框中输入的文本高亮显示/选择图像

Highlighting/selecting an image based on text entered in an textbox

本文关键字：文本 显示 选择 高亮 图像 输入      更新时间：2023-09-26

我正在寻找一个示例，其中一个图像，从几个，被选中/突出显示/稍微缩放取决于输入在文本框中。例如，在下面的案例中，当输入信用卡号码时，相应选择/突出显示适当的徽标。

|Visa|Mastercard||Amex|Diners| <== Images

| ________________________| & lt; = =卡号文本框

我自己不是前端开发人员，但我认为JavaScript/jQuery是实现上述内容的正确技术?页面是用ASP编写的。净MVC。

谢谢你的指点。

欢呼,

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

你想给每个图像一个唯一的ID属性和一个类，这样你就可以一次给所有图像设置样式。例如:

编辑:有一些bug。必须输入id。纠正。 

<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块中所做的事情，比如换出图像等。

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

太棒了!

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

        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");
            }
        }
    }

如果有人有关于如何改进代码的建议，我将不胜感激。

欢呼,

相关文章：