на кнопке определенным цветом
Кнопки поддерживают следующие свойства:
? value — текст, отображаемый на кнопке;
? disabled — признак запрета: если задано значение true, то кнопка явля-
ется неактивной (отображается серым цветом);
? form — ссылка на форму, в которой находится элемент;
? name — имя элемента;
? type — тип элемента формы.
Методы традиционны:
? blur() убирает фокус ввода с текущего элемента формы;
? focus() помещает фокус на текущий элемент формы.
События:
? onblur наступает при потере фокуса элементом формы;
? onclick возникает при нажатии кнопки;
? onfocus происходит при получении фокуса ввода элементом формы.
В приведенном далее примере (листинг 3.71) кнопка изначально не активна. При вводе в текстовое поле кнопка активируется. При нажатии кнопки текст, введенный в текстовое поле, отображается на кнопке. Текстовое поле очища- ется, и кнопка деактивируется.
Листинг 3.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>. При ис- пользовании этого тега текст на кнопке можно сделать цветным, а также можно задать клавишу быстрого доступа.
Переделаем пример из листинга 3.71. Вместо тега <input> используем тег
<button> и добавим клавишу быстрого доступа (листинг 3.72). При одновре-
менном нажатии клавиши, указанной в параметре accesskey, и клавиши
<Alt> выполняется функция f_click().
Листинг 3.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>
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)
Похожие посты:
- Анализ большого набора данных (0)
- Что такое селекторы и как их правильно использовать (0)
- Задание фонового изображения для страницы с помощью CSS (0)
- Выбор единиц измерения размера шрифтов:пикселы, пункты, пики или что-то другое (0)
- Организация табличных данных:удобство доступа и наглядность (0)
- Создание таблицы стилей для формы с возможностью ввода данных, как в электронную таблицу (0)
- Создание цветного фона для заголовка (0)
