提问人：Madara's Ghost 提问时间：10/16/2011 最后编辑：CommunityMadara's Ghost 更新时间：10/20/2011 访问量：574
响应式富编辑器预览
Responsive Rich Editor Preview
问：
最基本的部分是 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));
});
});
经过测试并且效果很好（我确实需要该部件，否则它不起作用）。
无论如何，进入主菜\*\*\*
问题
因为我使用的是 ，脚本的响应速度不是很快（例如，它仅在用户松开密钥后才“运行”）。我希望它的行为更像 StackOverflow 上的编辑器，其中按下键并立即发生响应。keyup
我尝试使用 and，但似乎该属性在运行时没有更新，所以我无法真正知道更新的值。keydownkeypressval()
总之
如何使其响应速度更快，以便当用户按下某个键时，预览会自动更新？
答：
0赞
Wesley Murch
10/16/2011
#1
你可以同时绑定 和 事件：keyupkeydown
$editor.bind('keyup keydown', function() {
encodeInput($(this));
});
我注意到只有第一次出现是有效的，将标志添加到正则表达式似乎有所帮助，并且仅出于 jsfiddle 演示的目的，取消选中“normalize css”会显示粗体文本。g
评论
0赞
Madara's Ghost
10/16/2011
还是同样的问题。在释放密钥之前不起作用。
0赞
Wesley Murch
10/16/2011
在 Chrome 中对我来说效果很好，而以前没有。不幸的是，我目前无法测试任何其他浏览器，我的笔记本电脑崩溃了，我在女朋友的电脑上。顺便说一句，可能想要添加到预览窗格。word-wrap:break-word;
0赞
Madara's Ghost
10/16/2011
我也在使用 chrome，但它不能按预期工作。
0赞
Wesley Murch
10/16/2011
如果我们没有看到同样的东西，我会感到惊讶，也许以不同的方式测试它，或者我误解了这个问题。究竟什么不起作用？我怎样才能重现它？我没有看到“在释放密钥之前不起作用”，它适用于我这边（例如，如果我按住我在两个窗格中都看到，它会在我键入时更新，包括格式）。我要上床睡觉了，祝你好运。ssssssssss
0赞
Wesley Murch
10/16/2011
嗯，我现在确实注意到有点滞后（尤其是在第一个字符上，实际打字时不是很明显）——但这似乎仍然是一个进步。希望你得到更好的答案。
0赞
Jauzsika
10/16/2011
#2
连续按下该键时会触发按键，因此您必须将其绑定到按键才能看到结果。就是这样。
更新：我明白你的意思了。也许您需要一个输入轮询器？查看去混淆的 wmd 代码。这将帮助您实现目标的无延迟编辑器：
评论
0赞
Wesley Murch
10/16/2011
尝试按退格键，它似乎没有更新已删除的字符。
0赞
Madara's Ghost
10/16/2011
阅读问题并测试您自己的代码，绑定按键会导致不更新（意思是我写 L-O-R-E-M 并查看 L-O-R-E）。只有当我按下另一个键（如 shift 或 ctrl）时，我才能看到最后一个字符。val()
2赞
Tim Down
10/20/2011
#3
您可以在大多数浏览器中使用 HTML5 事件，在 IE < 9 中使用该事件。这些事件在更新 textarea 的值后立即触发。inputpropertychange
下面是使用这些事件的更新演示：
我在 SO 的几个地方写过这个。以下是其中两个：
我建议不要在每次更改文本区域值时更新预览，因为它可能很快就会变得无响应，这对用户体验来说是一个很大的禁忌。我建议在更新预览之前“取消”事件，在这种情况下，等待一段时间的用户不活动（比如半秒钟）。这里有一个答案和一个可能有帮助的链接：
评论
0赞
Madara's Ghost
10/20/2011
完美无瑕的答案。16小时内的赏金:P
上一个：合并多个 REGEX 语句
下一个：套接字流、字节计数和计时器
评论
<em><i>