изменить фоновое изображение при изменении значения ввода

-1

Я ищу сценарий, который изменяет фоновое изображение контейнера div, когда специальные поля вводятся во входное поле.изменить фоновое изображение при изменении значения ввода

Я строю этот макет Creditcard здесь

внутри это <input type="text" name="" class="credit-input"> с классом credit-input.

Я ищу, что если первые три числа внутри значения генерируют другой фон.

Так, например, когда значение начинается с 411, должно быть фоновое изображение карты amex или когда оно начинается с 311, должны быть мастер-карты и т. Д.

было бы всего 4 разных фона.

Я не очень хорош в js, поэтому я надеюсь, что могу найти здесь какую-то помощь от ya.

Вот как мой html смотрит на moment.The class="jp-front" включает в себя весь стиль на данный момент ТНХ

<div class="jp-front"> 
       <input type="text" name="" class="credit-input"> 
      </div>

для любой помощи

источник

2016-09-20 p_e_88

Итак, что вы устали до сих пор?показать код 'JS', пожалуйста, –

Вы можете использовать onchange на onkeydown js events, чтобы получить каждое значение времени ввода и проверить первые 4 символа. – zhecky

К сожалению, у меня нет кода js, потому что я не так хорош в этом. Если я ошибаюсь здесь, я бы удалил сообщение –

Попробуйте это:

$(document).ready(function() { 

    $(".credit-input").on("input",function(){ 

     var value = $(this).val(); 

     if (value == "411") 
      $(".jp-front").css({backgroundImage:"url(http://www.lowestrates.ca/newcontent/img/creditcards/Gold_Rewards_Card_chip_467x293.png)"}); 

     else if (value == "311") 
      $(".jp-front").css({backgroundImage:"url(https://www.bmo.com/img/main/credit-cards/large/rewards-card.jpg)"}); 

    }) 

})

Окончательный код:

$(document).ready(function() { 
 
    
 
    $(".credit-input").on("input",function(){ 
 
    var value = $(this).val(); 
 
    
 
    if (value == "411") 
 
     $(".jp-front").css({backgroundImage:"url(http://www.lowestrates.ca/newcontent/img/creditcards/Gold_Rewards_Card_chip_467x293.png)"}); 
 
    
 
    else if (value == "311") 
 
     $(".jp-front").css({backgroundImage:"url(https://www.bmo.com/img/main/credit-cards/large/rewards-card.jpg)"}); 
 
      
 
     }) 
 
       
 
    })

.jp-front { 
 
    width: 300px; 
 
    height: 150px; 
 
    border: 1px solid #000; 
 
    background-size:100% 100%; 
 
    background-repeat: no-repeat; 
 
    padding: 20px 0px 0px 20px; 
 
}

<div class="jp-front"> 
 
    <input type="text" name="" class="credit-input"> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

источник

2016-09-20 14:57:56 Ehsan

Сделал мой день. Огромное спасибо эхсан. Спасибо –

Добро пожаловать! – Ehsan

Ваш входной элемент будет -

<div class="jp-front"> 
    <input type="text" name="card-number" class="credit-input"> 
</div>

Пусть ваш элемент изображения будет

<img src="default.jpg" id="card-img">

Ваш JavaScript будет выглядеть следующим образом -

$('input[name=card-number]').keyup(function() { 

    var inp = $('input[name=search]').val(); 
    if (inp === '311') { 
     $("#card-img").attr("src","mastercards.jpg"); 
    } 
    else if (inp === '411') { 
     $("#card-img").attr("src","amex.jpg"); 
    } 
    else if (inp === '') { 
     $("#card-img").attr("src","default.jpg"); 
    } 
});

Спасибо!

источник

2016-09-20 14:58:31 Arnab003

hey thx, для кода. выглядит жадно, но не работает для меня. он изменяется только, например, когда я набираю 411, но не на другие –

Привет @PeymanEtedali! Пожалуйста, попробуйте сейчас, я немного изменил код. :) – Arnab003

не слишком сложно, но это необходимо сделать трюк:

$("input[name='card']").keyup(function() { 

    img = 'blank.png'; 

    switch($(this).val().substring(0, 3)) { 

    case '111': 
     img = '111.png'; 
     break; 
    case '222': 
     img = '222.png'; 
     break; 
    } 

    $('.img').css('background', 'url(' + img + ') no-repeat center center'); 
});

Пример: https://jsfiddle.net/6hhtgnep/

источник

2016-09-20 14:59:50 Alex

Если вы не JQuery

Добавить ID = "..." и OnChange = "" OnKeyPress = "" OnKeyDown = ""

<div class="jp-front" id="card-div-id"> 
    <input id="card-input-field-id" type="text" name="" onchange="onCodeInput()" onkeypress="onCodeInput()" onkeydown="onCodeInput()" class="credit-input"> 
</div>

Javascript:

<script> 
    function onCodeInput(){ 
     var card_number = document.getElementById('card-input-field-id').value; 
     if (str.substr(0, 4) == '5466') { 
      document.getElementById('card-div-id').style.backgroundImage="url(images/mastercard.jpg)" 
     } else { /* others */ } 
    } 
</script>

источник

2016-09-20 15:01:07 zhecky

изменить фоновое изображение при изменении значения ввода

ответ

Смежные вопросы