Обработка щелчка на кнопке
В приведенном ниже примере (листинг 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>
<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>
<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>
 |
 |
 |