jQuery onChange добавляет значение поля в HTML

Question

Я хочу напечатать значение поля ввода в реальном времени в DIV.

Прямо сейчас у меня есть это:

        $("#page_name").change(function () {

            var new_val = $("#page_name").val();

            $("#page_url").html(new_val);

        });

Это не работает, очевидно.Кто-нибудь получил предложение?

Спасибо!

Answer 1

Как указано, «изменение» происходит только тогда, когда элемент теряет фокус.Альтернативой привязке его к событию нажатия клавиши может быть привязка к событию «ввода».

$('#page_name').bind('input', function(e){
    var output = e.target.value;
    $('#page_url').text(output);
});

http://jsfiddle.net/xY7Q6/

Проблема с нажатием клавиши заключается в том, что она не работает при копировании и вставкеtext.

Событие ввода - это почти то, что все ожидают от «изменения» (о: я думаю, что это событие довольно новое (HTML5?), старые браузеры могут его не получить.

Answer 2

То, что должно действительно работать. Мое лучшее предположение следующее:

1. Проверьте ваши селекторы, возможно. Кроме того, вы можете использовать $ (this) вместо выбора #page_name во второй раз.
2. Изменение не всегда срабатывает так часто, как вы думаете. Попробуйте вместо этого связать событие с keyup.
3. Также, вероятно, плохой идеей является .html () для узла. Возможно, вы захотите .text (), чтобы это было безопасно.

Answer 3

На самом деле это будет работать, но только когда вы перемещаете курсор из поля ввода, потому что изменение срабатывает при потере фокуса.

Что вам нужно, это нажатие клавиши.Код такой же, как ваш

 $("#page_name").keypress(function () {
            var new_val = $("#page_name").val();
            $("#page_url").html(new_val);
});

протестируйте его здесь

http://jsfiddle.net/y3zpP/