Question

基本位是JavaScript：

function encodeInput(editor) {
    theText = editor.val();
    theText = theText.replace(/\*\*\*(.*?)\*\*\*/, '<strong><i>$1</i></strong>', 'g');
    theText = theText.replace(/\*\*(.*?)\*\*/, '<strong>$1</strong>', 'g');
    theText = theText.replace(/\*(.*?)\*/, '<i>$1</i>', 'g');
    console.log(theText);
    $('#preview').html(theText);
}

$(function() {
    $editor = $('#editor');
    $editor.keyup(function() {
        encodeInput($(this));
    });
});

经过测试并且效果很好（我确实需要\*\*\*部分或者它不起作用）无论如何，在主菜上

问题

因为我正在使用keyup，所以脚本响应不是很快（例如，一旦用户放开密钥，它就会“运行”）。我希望它的行为更像StackOverflow上的编辑器，按下键并立即响应。

我尝试使用keydown和keypress但似乎val()属性在运行时没有更新，所以我真的不知道更新后的值。

简而言之

如何让它更具响应性，以便当用户按下某个键时，预览会自动更新？

Answer 1

您可以在大多数浏览器中使用HTML5 input事件，在IE中使用propertychange事件＆lt; 9.这些事件在textarea的值更新后立即触发。

以下是使用这些事件的更新演示：

http://jsfiddle.net/muWm2/1/

我在SO的几个地方写过这篇文章。以下是其中两个：

我建议不要在每次更改textarea值时更新预览，因为它很快就会无法响应，这对用户体验来说是一个很大的禁忌。我建议“去抖动”事件，在这种情况下，在更新预览之前等待一段时间的用户不活动（比如说半秒）。这是一个答案和可能有用的链接：

Answer 2

keyup和keydown事件可以bind()：

$editor.bind('keyup keydown', function() {
    encodeInput($(this));
});

我注意到只有第一次出现才有效，将g标志添加到正则表达式似乎有所帮助，并且仅出于jsfiddle演示的目的，取消选中“normalize css”会使粗体文本出现。< / p>

http://jsfiddle.net/tuUym/3/

Answer 3

当连续按下按键时，按键会激活，因此您必须将其绑定到按键才能看到结果。就是这样。

http://jsfiddle.net/tuUym/4/

更新：我明白你的意思了。也许你需要一个输入轮询器？查看de conffuscated wmd代码。这将帮助您实现您的目标：

WMD Download

响应丰富的编辑器预览

问题

简而言之

3 个答案: