Захватить ввод текста как пользовательские типы

Question

Я пытаюсь обновить тег span на лету данными из текстового поля ввода. В основном у меня есть текстовое поле, и я хотел бы иметь возможность захватывать вводимые пользователем данные по мере их ввода и отображать их в теге span под полем.

Код:

<input id="profileurl" type="text">
<p class="url">http://www.randomsite.com/<span id="url-displayname">username</span></p>

JQuery:

var username;

$('#profileurl').keyup(function(username);
$("#url-displayname").html(username);

См. В JS Fiddle: http://jsfiddle.net/pQ3j9/

Полагаю, функция keyup - не лучший способ сделать это. Поскольку проверка ключа не сможет получить предварительно заполненную или вставленную форму ввода.

В идеале есть какая-то волшебная функция jQuery, которая может просто выводить любую информацию, которая находится в коробке, всякий раз, когда она обнаруживает ключ, но если этот метод существует, я еще не нашел его.

РЕДАКТИРОВАТЬ: Вы, ребята, потрясающе. Похоже, что .val () - это магический метод.

Второй вопрос: Как бы вы ограничили ввод? Глядя на измененные jsfiddle's, когда пользователь вводит html-тег, такой как

---

, браузер интерпретирует его и разбивает форму. Вы указываете массив, а затем проверяете это? Есть ли в jquery что-то вроде функции strip_tags в PHP?

Answer 1

$('#profileurl').keyup(function(e) {
    $("#url-displayname").html($(this).val());
}).keypress(function(e) {
    return /[a-z0-9.-]/i.test(String.fromCharCode(e.which));
});

проверить измененный jsfiddle:
http://jsfiddle.net/roberkules/pQ3j9/5/

Обновление: как указывает @GregL, keyup действительно лучше (в противном случае, например, возвраты не обрабатываются вообще).

Answer 2

Что касается второго вопроса, если вы хотите сохранить символы и не анализировать их как html-сущности, вам следует сделать это вместо этого:

$('#profileurl').keyup(function(key) {
    $("#url-displayname").text($(this).val());
});

Проверьте это в - http://jsfiddle.net/dhruvasagar/pQ3j9/6/

Answer 3

Аналогично ответу roberkules, но использование keyup(), как вы предложили, мне кажется, работает лучше в браузере на основе Chrome:

$('#profileurl').keyup(function(e) {
    $("#url-displayname").html($(this).val());
});

Обновлен jsFiddle: http://jsfiddle.net/pQ3j9/3/

Answer 4

Вы можете связать несколько событий с помощью bind

http://jsfiddle.net/dwick/DszV9/