Обработка щелчка на кнопке

В приведенном ниже примере (листинг 8.6) кнопка изначально неактивна. При вводе в текстовое поле кнопка активизируется. При щелчке на кнопке текст, введенный в текстовое поле, отображается на кнопке. Текстовое поле очищается и кнопка деактивизируется.

Листинг 8.6. Обработка щелчка на кнопке

<!doctype html>
<html>
<head>
<title>Обработка щелчка на кнопке</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#btn1").click(function() {
      var elem = $("#txt1");
      this.value = elem.val();
      elem.val("");
      $(this).attr("disabled", true);
   });
   $("#txt1").keyup(function() {
      var txt1 = $("#txt1").val();
      var btn1 = $("#btn1");
      if (txt1.length == 0) {
         if (!btn1.is(":disabled")) btn1.attr("disabled", true);
      }
      else {
         if (btn1.is(":disabled")) btn1.removeAttr("disabled");
      }
   });
});
</script>
</head>
<body>
<input type="text" id="txt1"><br>
<input type="button" value="Изменить текст на кнопке"
       id="btn1" disabled>
</body>
</html>

Обычная командная кнопка может быть вставлена в веб-страницу не только с помощью тега <input>, но и с помощью парного тега <button>. В качестве примера выведем порядковый индекс кнопки, на которой был сделан щелчок (листинг 8.7).

Листинг 8.7. Вывод порядкового индекса кнопки, на которой был сделан щелчок

<!doctype html>
<html>
<head>
<title>Вывод порядкового индекса кнопки</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $(":button").click(function() {
      alert("Индекс: " + $(":button").index(this));
   });
});
</script>
</head>
<body>
<input type="button" value="Кнопка 1"><br>
<input type="button" value="Кнопка 2"><br>
<button>Кнопка 3</button><br>
<button>Кнопка 4</button>
</body>
</html>
Предыдущая статья Все статьи Следующая статья