AJAX 显示您键入的文本

Question

我的页面上有一个文本区域，位于左侧。右侧有一个简单的 div。

文本区域稍后将成为 CKeditor。现在我想要它，以便当我在文本区域中输入内容时，它会立即显示我在 div 中输入的文本。

我只是注意到 Stackoverflow 正是使用了我想要的东西。当我写这个问题时，我会看到下面会是什么样子。

这具体是如何完成的？我已经在 Google 上搜索并遵循了 AJAX 教程，但我没有得到让我更接近的教程。

谢谢！

Answer 1

在这种情况下没有 AJAX。只是 JavaScript 处理。您在输入项（文本区域或其他）上设置更改事件处理程序，并使用 JS 格式化该文本并将格式化的内容放入另一个容器中。

AJAX 需要服务器请求，而这完全在客户端完成。

Answer 2

这与ajax无关。这只是一个 JavaScript 挑战。首先，你必须有一个js函数来处理textarea的 keydown 事件，然后您将更改右侧 div 中的文本值（或 html 值）以响应 keydown 事件。我认为你应该更多地了解 javascript 然后 jquery 才能轻松解决这个问题。

Answer 3

$('#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>

Answer 4

这是最近一个需要类似内容的问题的代码。我猜你知道足够的 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;
});

原始帖子是 在这里。

Answer 5

使用 jQuery

$(function(){
    $("textarea").keyup(function(){
        $("div").html($(this).val());
    });
});

http: //jsfiddle.net/bxf8x/