jQuery: добавить элемент с текстовым сообщением при изменении поля ввода
События jQuery: упражнение 3 с решением
Добавьте элемент <p> с текстовым сообщением при изменении поля <input>.
Пример данных :
HTML:
<Тело> <form name = 'demo_form'> Имя: <input type = "text" name = "fname"> <br> Фамилия: <input type = "text" name = "lname"> <br> <input type = "submit" value = "Submit"> </ Форма> </ Body>
Решение :
HTML-код:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Append a <p> element with a text message when an <input> field is changed</title>
</head>
<body>
<form>
<input id="field1" type="text" value="Field 1">
</form>
</body>
</html>
Код JavaScript:
$( "#field1").change(function() {
$( "<p>The text has changed.</p>" ).appendTo( "body" );
});
Примечание. В jQuery метод appendTo () используется для вставки каждого элемента в наборе совпадающих элементов в конец цели.
Демонстрация в реальном времени:
См. Pen jquery-events-упражнение-3 от w3resource ( @ w3resource ) в CodePen .
Внесите свой код и комментарии через Disqus.
Предыдущий: присоединить функцию к событию размытия. Событие размытия происходит, когда следующее поле <input> Field1 теряет фокус.
Далее: Скрыть все заголовки на странице при нажатии.
Каков уровень сложности этого упражнения?
Новый контент: Composer: менеджер зависимостей для PHP , R программирования
disqus2code