Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Обработка щелчка на кнопке
В приведенном ниже примере (листинг 1.25) кнопка изначально недоступна. При вводе в текстовое поле кнопка активизируется. При щелчке на кнопке текст, введенный в текстовое поле, отображается на кнопке. Текстовое поле очищается и кнопка становится недоступной.
Листинг 1.25. Обработка щелчка на кнопке
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Обработка щелчка на кнопке</title>
</head>
<body>
<div class="container my-3">
<input type="text" id="txt1" class="form-control mb-2">
<input type="button" value="Изменить текст на кнопке"
id="btn1" class="btn btn-primary" disabled>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('#btn1').click( function() {
var elem = $('#txt1');
this.value = elem.val();
elem.val('');
$(this).prop('disabled', true);
});
$('#txt1').keyup( function() {
var txt1_val = $('#txt1').val();
var btn1 = $('#btn1');
if (txt1_val.length === 0) {
if ( !btn1.is(':disabled') ) btn1.prop('disabled', true);
}
else {
if ( btn1.prop('disabled') ) btn1.prop('disabled', false);
}
});
});
</script>
</body>
</html>
Обычная командная кнопка может быть вставлена в Web-страницу не только с помощью тега <input>
, но и с помощью парного тега <button>
. В качестве примера выведем порядковый индекс кнопки, на которой был сделан щелчок (листинг 1.26).
Листинг 1.26. Вывод порядкового индекса кнопки, на которой был сделан щелчок
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Вывод порядкового индекса кнопки</title>
</head>
<body>
<div class="container my-3">
<input type="button" value="Кнопка 1" class="btn btn-primary">
<input type="button" value="Кнопка 2" class="btn btn-primary">
<button type="button" class="btn btn-primary">Кнопка 3</button>
<button type="button" class="btn btn-primary">Кнопка 4</button>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$(':button').click( function() {
window.alert( 'Индекс: ' + $(':button').index(this) );
});
});
</script>
</body>
</html>
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов