По мере набора текста в поле ввода (элемент input) необходимо получать введенное значение и отображать его в другом элементе, например p.

Опубликовал: admin Wednesday, July 24, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Решение

Для решения задачи воспользуемся методом val() (листинг 2.4.1).

Лис ти нг 2 .4 .1 . Использование метода val()

<head>
<title>example-2-4-1</title>
<content>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<script
src="js/jquery-1.5.2.min.js"
type="text/javascript"></script>
<style
type="text/css">
p { border:1px dotted
#369; padding:5px; color:#00f; }
</style>
<script type="text/javascript">
$(function(){
$("input").keyup(function
() { var value = $(this).val();
$("p").text(value);
}).keyup();
});
</script>
</head>
<body>
<input
type="text" value="какой-то текст"/>
<p></p>
</body>
</html>

<head>

<title>example-2-4-1</title>

<meta

http-equiv="Content-Type" content="text/html;

charset=utf-8" />

<script

src="js/jquery-1.5.2.min.js"

type="text/javascript"></script>

<style

type="text/css">

p { border:1px dotted

#369; padding:5px; color:#00f; }

</style>

$(function(){

$("input").keyup(function

() { var value = $(this).val();

$("p").text(value);

}).keyup();

});

</script>

</head>

<body>

<input

type="text" value="какой-то текст"/>

<p></p>

</body>

</html>

Обсуждение

В HTML-коде листинга 2.4.1 описан элемент input, значением атрибута value которого является некоторый текст. В следующий за ним элемент p будем вставлять полученные значения.

Давайте разберемся в JavaScript-коде. Отыщем элемент input и свяжем с ним событие keyup, при наступлении которого будем получать значение атрибута value с помощью метода val() и вставлять его в элемент p. Следующий далее в цепочке вызов события keyup нужен для того, чтобы вставить значение атрибута value элемента input в элемент p при загрузке страницы.

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

По мере набора текста в поле ввода (элемент input) необходимо получать введенное значение и отображать его в другом элементе, например p.

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply