AJAX, чтобы показать текст, который вы вводите

Question

У меня есть одна текстовая область на моей странице, которая расположена слева.На правой стороне у меня есть простой div.

Текстовая область позже станет CKeditor.Теперь мне бы хотелось, чтобы, когда я что-то печатал в текстовой области, он сразу отображал текст, который я печатаю в div.

Я просто замечаю, что Stackoverflow использует именно то, что я хочу.Пока я пишу этот вопрос, я вижу, как он будет выглядеть ниже.

Как именно это делается?Я искал в Google и следовал учебникам по AJAX, но я не получаю учебники, которые приближают меня.

Спасибо!

Answer 1

В этой ситуации AJAX нет. Просто обработка JavaScript. Вы устанавливаете обработчик события изменения для элемента ввода (textarea или другого), а с помощью JS вы форматируете этот текст и помещаете форматированное содержимое в другой контейнер.

AJAX потребует запросов к серверу, хотя это делается полностью на стороне клиента.

Answer 2

Это не относится к ajax.Это просто вызов JavaScript.Во-первых, у вас должна быть функция js, которая обрабатывает событие keydown текстовой области, затем вы измените текстовое значение (или значение html) в правом div в ответ на событие 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

Использование jQuery

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

http://jsfiddle.net/bxf8x/

Answer 5

Вот код из недавнего квеста, которому нужно что-то подобное. Я предполагаю, что вы знаете достаточно 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;
});

Оригинальный пост здесь .