jquery - 我如何进行实时预览？

Question

我想要实时预览功能。谁能给我代码。我正在使用引导程序进行样式设置。我曾尝试使用 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>

Answer 1

我建议您使用id而不是classes 来完成这项工作。

<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的链接。

Answer 2

你不应该使用“-”作为变量名

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

});

Answer 3

试试这个我猜你想要的？？

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

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