JavaScript를 통한 사용자 입력을 기반으로 신용 카드 로고 업데이트

모바일 웹 사이트에 대한 신용 카드 페이지를 생성 중입니다. 입력란의 이미지가 마에스트로 카드 여야하고 4를 입력하면 이미지가 다른 카드의 이미지로 변경되어야합니다. Clear Trip 모바일 사이트만큼이나.JavaScript를 통한 사용자 입력을 기반으로 신용 카드 로고 업데이트

자바 스크립트의 onkeypress 이벤트를 사용했지만 입력란에 값이없는 경우 작업을 수신합니다.

<input type="text" size="20" autocomplete="off" style="width:80%" onkeypress="func();"/> <div class="card-img"></div>

어떻게해야합니까?

출처

2012-05-02 hkasera

당신은 내가 정말 당신도 사용자의 신용 카드 번호를 묻는 메시지가 표시되지 않습니다 희망이 아니라 기본적인 것을 요구하고 있기 때문이다. – ThiefMaster

및 input 이벤트를 처리해야합니다.

출처

2012-05-02 15:29:51 SLaks

jsFiddle : http://jsfiddle.net/ksHa2/12/

<div class="card-img"><img id="img" src="http://www.google.com/logos/2012/laborday12-hp.jpg"/></div> 

<input type="text" size="20" autocomplete="off" style="width:80%" onkeydown="update(this);" onchange="update(this);"/> 

<script> 
    function update(object) 
    { 
     if (object.value.length == 1) 
     { 
      document.getElementById('img').src = "http://www.google.com/logos/2012/ramon_y_cajal-2012-hp.jpg"; 
     } 
     else if (object.value.length == 2) 
     { 
      document.getElementById('img').src = "http://www.google.com/logos/2012/queensday12-hp.jpg"; 
     } 
     else if (object.value.length == 3) 
     { 
      document.getElementById('img').src = "http://www.google.com/logos/2012/queensday12-hp.jpg"; 
     } 
     else 
     { 
      document.getElementById('img').src = "http://www.google.com/logos/2012/laborday12-hp.jpg"; 
     } 
    } 
</script>

출처

2012-05-02 15:35:35

숫자를 입력 할 때 변경을 원합니다. 내가 입력 할 때 텍스트 상자가 초점이 맞지 않을 때 이미지를 가져 오지 않아야합니다! – hkasera

"내 대답"(http://stackoverflow.com/a/10029116/1048572)의 질문에 "100 만개의 IF 문에 대한 대안"을 읽어야 할 수도 있습니다 ... 한 줄에 귀하의 기능 :'document.getElementById 'img'). src = "http://www.google.com/logos/2012/"+ [ "ramon_y_cajal-2012-hp", "queensday12-hp", "queensday12-hp", "laborday12-hp" ] [object.value.length-1] + ".jpg";' – Bergi

JavaScript를 통한 사용자 입력을 기반으로 신용 카드 로고 업데이트

답변

관련 문제