Оглавление

18.10. Кнопки. Обработка нажатия кнопки

Деактивация кнопки. Создание клавиши быстрого доступа и вывод текста на кнопке определенным цветом

 

Кнопки поддерживают следующие свойства:
□  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>Пример использования тега &lt;button&gt;</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>

 

11
 << Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити