像 Stackoverflow 这样的直接/实时预览？答案

【问题标题】：Direct/Live Preview Like Stackoverflow?像 Stackoverflow 这样的直接/实时预览？
【发布时间】：2010-02-11 20:41:07
【问题描述】：

我如何喜欢 Stackoverflow，当您在此字段中键入时，它会直接在其下方预览？.. 我不知道这是如何制作的，我真的很喜欢对我的网站做这样的事情。我有一个你编辑的文本区域，然后..？怎么做？

谢谢

【问题讨论】：

【解决方案1】：

使用jquery，在一个script标签的header中：

    $(document).ready(function(){
        $('#textbox-id').keypress(function(){
          $('#preview-id').html($(this).val());
        }
    });

然后，在你的 html 中：

<textarea id="textbox-id"></textarea>
<div id="preview-id"></div>

编辑

妈的，被揍了几秒。另外，wmdeditor 就是这样。

【讨论】：

【解决方案2】：

简单，放置一个div元素，然后在文本框的onMouseup上就可以让jquery事件移动信息了

<textarea id="entry" onmouseup="$('#output').html($('#entry').val())"></textarea>
<div id="output"></div>

【讨论】：

这种方法会给页面渲染带来很多问题，除非您还对数据进行 HTMLEncode。 yuki-onna.co.uk/html/encode.html 想象一下，如果您输入
，则缺少关闭的 DIV 可能会使页面布局完全消失。除非您进行 HTML 编码，否则甚至没有提及 SCRIPT 标记的含义。
然后瞧……您刚刚在您的网站上启用了 XSS 攻击向量；)
他没有说他是如何拯救他们的：P

【解决方案3】：

使用jQuery的keypress事件：

$('#in').keypress(function() {
    $('#out').text($(this).val());
});

【讨论】：

【解决方案4】：

看到这个，http://jsfiddle.net/testtracker/2C3Zj/

$(document).ready(function(){
    $('#textbox-id').on('keyup', function(){
      $('#preview-id').html($(this).val());
    });
});

【讨论】：