Приднестровская поддержка XOOPS
Деактивация кнопки. Создание клавиши быстрого доступа и вывод текста на кнопке определенным цветом
Кнопки поддерживают следующие свойства:
□ value — текст, отображаемый на кнопке;
□ disabled — признак запрета: если задано значение true, то кнопка является неактивной (отображается серым цветом);
□ form — ссылка на форму, в которой находится элемент;
□ name — имя элемента;
□ type — тип элемента формы.
Методы традиционны:
□ blur() убирает фокус ввода с текущего элемента формы;
□ focus() помещает фокус на текущий элемент формы.
События:
□ onblur наступает при потере фокуса элементом формы;
□ onclick возникает при нажатии кнопки;
□ onf ocus происходит при получении фокуса ввода элементом формы.
В приведенном далее примере (листинг 3.71) кнопка изначально не активна. При вводе в текстовое поле кнопка активируется. При нажатии кнопки текст, введенный в текстовое поле, отображается на кнопке. Текстовое поле очищается, и кнопка деактивируется.
Листинг 71. Обработка нажатия кнопки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример использования кнопок</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
function f_up() {
if (document.getElementById("text1").value == "") {
document.getElementById("button1").disabled = true;
}
else {
document.getElementById("button1").disabled = false;
}
}
function f_click() {
document.getElementById("button1").value =
document.getElementById("text1").value;
document.getElementById("text1").value = "";
document.getElementById("button1").disabled = true;
}
//-->
</script>
</head>
<body>
<form action="test.php" method="GET" onsubmit="return false;">
<div>
<input type="text" name="text1" id="text1" onkeyup="f_up();"><br>
<input type="button" value="Изменить текст на кнопке"
onclick="f_click();" id="button1" disabled>
</div>
</form>
</body>
</html>
Обычная командная кнопка может быть вставлена в Web-страницу не только с помощью тега <input>, но и с помощью парного тега <button>. При использовании этого тега текст на кнопке можно сделать цветным, а также можно задать клавишу быстрого доступа.
Переделаем пример из листинга 71. Вместо тега <input> используем тег <button> и добавим клавишу быстрого доступа (листинг 72). При одновременном нажатии клавиши, указанной в параметре accesskey, и клавиши
<Alt> выполняется функция f_ciick().
Листинг 72. Использование тега <button>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример использования тега <button></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
function f_up() {
if (document.getElementById("text1").value == "") {
document.getElementById("button1").disabled = true;
}
else {
document.getElementById("button1").disabled = false;
}
}
function f_click() {
document.getElementById("span1").innerText =
document.getElementById("text1").value;
document.getElementById("text1").value = "";
document.getElementById("button1").disabled = true;
}
//-->
</script>
</head>
<body>
<form action="test.php" method="GET" onsubmit="return false;">
<div>
<input type="text" name="text1" id="text1" onkeyup="f_up();"><br>
<button accesskey="т" onclick="f_click();" id="button1" disabled>
<span id="span1" style="color: red">
<span style="text-decoration: underline">Т</span>екст красного цвета
</span></button>
</div>
</form>
</body>
</html>
Отправитель | Нити |
---|
6 пользователь(ей) активно (4 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 6 далее... |