Question

我的页面上有一个textarea位于左侧。在右侧，我有一个简单的div。

textarea后来成为CKeditor。现在我想拥有它，以便当我在textarea中输入内容时，它会立即显示我在div中输入的文本。

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

这究竟是怎么做到的？我在谷歌上搜索并遵循了AJAX教程，但我没有得到让我更接近的教程。

谢谢！

Answer 1

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

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

Answer 2

$('#text-area-id').keypress(function() { $('#div-id').html($(this).value()); });

这可能会有所帮助：）

如果你没有使用jquery那么你可以这样做

创建方法，将在按键时调用

function onChange(el)
    {
       document.getElementById('#div-id').innerHTML = el.innerText;

     }

然后在您的textarea上附加活动

<textarea onkeyup="onChange(el);"></textarea>

Answer 3

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

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;
});

原帖是here。

Answer 5

使用jQuery

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

http://jsfiddle.net/bxf8x/

AJAX显示您键入的文本

5 个答案: