我的页面上有一个文本区域，位于左侧。在右侧我有一个简单的 div。
textarea 稍后将成为 CKeditor。现在我想拥有它，以便当我在 textarea 中输入内容时，它会立即显示我在 div 中输入的文本。
我只是注意到 Stackoverflow 使用的正是我想要的。当我写下这个问题时，我会看到下面会是什么样子。
这究竟是如何完成的？我在 Google 上搜索并关注了 AJAX 教程，但我没有找到让我更接近的教程。
谢谢！
【问题讨论】：
标签： javascript dom
在这种情况下没有 AJAX。只是 JavaScript 处理。您在输入项（textarea 或其他）上设置更改事件处理程序，并使用 JS 格式化该文本并将格式化的内容放入另一个容器中。
AJAX 需要服务器请求，而这完全在客户端完成。
【讨论】：
这与 ajax 无关。这只是一个javascript挑战。首先，你必须有一个 js 函数来处理 textarea 的keydown event，然后你将更改右侧 div 中的文本值（或 html 值）以响应 keydown 事件。我认为你应该更多地了解 javascript 然后 jquery 来轻松解决这个问题。
【讨论】：
$('#text-area-id').keypress(function() { $('#div-id').html($(this).value()); });
这可能会有所帮助:)
如果你不使用 jquery，那么你可以这样做
创建将在按键时调用的方法
function onChange(el)
{
document.getElementById('#div-id').innerHTML = el.innerText;
}
然后在你的文本区域附加事件
<textarea onkeyup="onChange(el);"></textarea>
【讨论】：
change 监听器仅在您失去对该领域的关注时触发。不过，Alin，理论上 OP 可以使用 jQuery。
这是最近一个问题的代码，需要类似的东西。我猜你知道足够多的 JS 可以根据你的需要修改它。
$('#names').bind('keyup', function(){
var text = $(this).val();
var tokens = text.split(" ");
var output = "";
for(int i=0; i<tokens.length; i++){
output+= "<span>"+tokens[i]+"</span>&nbps;"; //note extra space at the end
}
$('#preview').innerHTML=output;
});
原帖是here。
【讨论】：
input/textarea 元素所做的一切，在keyup 上，它获取输入元素的值，使用空格作为分隔符将其拆分为单词数组，在每个单词周围放置一个跨度并写入将 html 输出到带有 id preview 的 div 中。 jQuery javascript lib 减少了您必须编写的代码并提供了很多方便的功能，如果您不想使用它，只需使用document.getElementById() 并附加一个事件侦听器（而不是绑定）示例goo.gl/RMjT
使用jQuery
$(function(){
$("textarea").keyup(function(){
$("div").html($(this).val());
});
});
【讨论】：