2013-03-08 63 views
-1

我想要有實時預覽功能。 任何人都可以給我的代碼。我使用bootstrap進行造型。我試圖使用keyup()進行實時預覽,我不明白它有什麼問題。我該如何做實時預覽?

<div class="control-group"> 
    <label class="control-label" for="question">Question</label> 
     <div class="controls"> 
      <input class="input-xxlarge" type="text" name="question" id="question" required="true" placeholder="write your question"><span class="preview"></span> 
     </div> 
    </div> 

這是我的jQuery的實時預覽。

<script type="text/javascript"> 
     /* <![CDATA[ */ 

     $('.input-xxlarge').keyup(function(){ 
      var input-xxlarge = $(this).val(); 
      $("preview").html(input-xxlarge); 
      {return false;} 
     }); 

    /* ]]> */ 
</script> 
+3

*「我不明白這有什麼錯爲」 *對於一個有與HTML的名字'preview'沒有元素。也許你打算使用ID選擇器'#preview'。 – 2013-03-08 13:51:28

+0

抱歉,我編輯了這個錯誤。我在我的文本框旁邊使用預覽作爲進行實時預覽。 – 2013-03-08 14:00:10

+2

您還必須修復選擇器。如果你看看控制檯,你會看到錯誤'SyntaxError:missing;之前陳述'或類似的東西。 '-'作爲變量名稱的一部分無效,請使用其他字符。要了解如何調試JavaScript代碼,請查看http://www.netmagazine.com/tutorials/javascript-debugging-beginners。 – 2013-03-08 14:03:48

回答

2

我建議你使用的id代替class ES作業。

<div class="control-group"> 
    <label class="control-label" for="question">Question</label> 
    <div class="controls"> 
     <input class="input-xxlarge" type="text" name="question" id="question" 
     required="true" placeholder="write your question" /> <span class="preview"></span> 

    </div> 
</div> 

$('.input-xxlarge').keyup(function() { 
    var impt = $(this).val(); 
    $(".preview").html(impt); 
}); 

的工作就好了。這是一個鏈接到fiddle

+0

感謝夢想食客真的很好的網站。 – 2013-03-08 14:15:06

1

你不應該使用「 - 」爲變量名

$(document).ready(function(){ 
     $('.input-xxlarge').keyup(function(){ 
      var inputxxlarge = $(this).val(); 
      $(".preview").html(inputxxlarge); 
      {return false;} 
     }); 

}); 
1

嘗試這一點,正是你想要我猜?

http://jsfiddle.net/8ajQF/2

$(document).ready(function(){ 
    $("input").keypress(function(){ 
    var sac = $(this).val(); 
    $("span").text(sac); 
    }); 
}); 
+0

從文本框中刪除文本時,這不是「實時」。我認爲在這種情況下,「keydown」或「keyup」將是一個適當的事件。 – maxxon15 2013-04-16 06:38:36