最重要的部分是 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() 属性在运行时没有更新，所以我可以'真正知道更新值。
简而言之
如何让它更具响应性，以便当用户按下某个键时，预览会自动更新？
最佳答案
您可以在大多数浏览器中使用 HTML5 input 事件，在 IE < 9 中使用 propertychange 事件。这些事件会在文本区域的值更新后立即触发。
这是使用这些事件的更新演示:
我在 SO 上的一些地方写过这个。这是其中两个:
我建议不要在对 textarea 的值进行每次更改时更新预览，因为它可能很快就会失去响应，这对用户体验来说是一个很大的禁忌。我建议“去抖动”事件，在这种情况下，在更新预览之前等待一段时间的用户不活动(比如半秒)。这是一个可能有帮助的答案和链接:
关于javascript - 响应式富编辑器预览，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7783541/