2012-03-30 75 views
0

所以我試圖自動更新使用JavaScript的圖像源,但由於某種原因它不會工作。正在從我的php文本生成器(生成帶有文本的圖像)中檢索圖像,從輸入框中抓取文本。我希望它自動抓取輸入框裏面的文本,然後更改圖像gen.php文本的src = Input_box_text_goes_here使用jQuery更新圖像源

這裏是我的代碼:?

<html> 
    <head> 
     <title>text generator</title> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    </head> 
    <body> 
     <script language=javascript type='text/javascript'> 
      setInterval(function() { 
       var str= document.form.letters.value; 
       $('#logo').src("gen.php?text="+str); 
      }, 10); 
     </script> 
     <img id="logo" name="logo" src="gen.php?text=default" /> 
     <form name="form" action=""> 
      Text: <input type="text" name="letters"/> 
     </form> 
    </body> 
</html> 

任何幫助將不勝感激。

+1

10毫秒的圖像請求時間間隔?這會殺死你的瀏覽器和你的服務器 – Joseph 2012-03-30 23:37:18

回答

2

變化$('#logo').src("gen.php?text="+str);變爲$('#logo').attr("src", "gen.php?text="+str);

1

嘗試:

<script> 
    $(function(){ 

     //reference the image 
     var img = $('#logo'); 

     //use onkeyup instead of polling 
     $('input[name="letters"]').on('keyUp',function(){ 

      //get the value every keystroke 
      var inputValue = $(this).val(); 

      //apply the values to the image source 
      img.each(function(){ 
       this.src = "gen.php?text="+inputValue; 
      }); 
     }); 
    }); 
</script>