Элементы управления

В этой главе мы рассмотрим элементы управления и научимся с помощью JavaScript обрабатывать данные, введенные пользователем.

Командная кнопка

Командная кнопка является наиболее часто используемым элементом управления. При нажатии кнопки мы можем выполнить какую-либо операцию. Кнопка вставляется с помощью тега <input> или <button>. При использовании тега <button> текст на кнопке можно сделать цветным, имеется возможность отобразить значок, а также можно задать клавишу быстрого доступа. Пример создания кнопок:

<input type="button" value="Текст на кнопке">
<button type="button">Текст на кнопке</button>

В параметре type указывается тип кнопки:

  • button — обычная командная кнопка;
  • reset — кнопка, при нажатии которой вся форма очищается (элементы формы примут значения по умолчанию);
  • submit — кнопка, при нажатии которой происходит отправка данных формы.

Кнопки поддерживают следующие основные свойства:

  • value — текст, отображаемый на кнопке (для тега <input>);
  • disabled — если задано значение true, то кнопка является неактивной (отображается серым цветом);
  • type — тип кнопки.

Методы:

  • blur() — убирает фокус ввода;
  • focus() — устанавливает фокус ввода.

События:

  • onblur — наступает при потере фокуса ввода;
  • onclick — возникает при нажатии кнопки;
  • onfocus — происходит при получении фокуса ввода.

Пример обработки нажатия кнопки приведен в листинге 8.1.

Листинг 8.1. Обработка нажатия кнопки

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self' 'unsafe-inline'">
   <title>Командная кнопка</title>
</head>
<body>
   <input type="button" value="Кнопка 1" id="btn1">
   <button type="button" id="btn2">Кнопка 2</button>
   <button type="button" id="btn3">Неактивная кнопка</button>
   <script>
      let btn1 = document.getElementById('btn1');
      btn1.addEventListener('click', () => {
         console.log('Нажата кнопка 1');
      });
      let btn2 = document.getElementById('btn2');
      btn2.addEventListener('click', () => {
         console.log('Нажата кнопка 2');
      });
      document.getElementById('btn3').disabled = true;
   </script>
</body>
</html>

Однострочные поля

Однострочные поля вставляются с помощью тега <input>. Параметр type может принимать следующие значения:

  • text — обычное текстовое поле;
  • password — текстовое поле для ввода пароля (все введенные символы заменяются точками);
  • search — поле ввода подстроки для поиска;
  • url — текстовое поле для ввода URL Значение автоматически проверяется. Форма отправляется только в случае, если поле не заполнено или содержит корректное значение URL. Существование URL не проверяется. Если нужно исключить пустое значение, то следует дополнительно указать параметр required;
  • email — текстовое поле для ввода E-mail. Значение автоматически проверяется. Форма отправляется только в случае, если поле не заполнено или содержит корректное значение E-mail. Существование E-mail не проверяется. Если нужно исключить пустое значение, то следует дополнительно указать параметр required;
  • tel — текстовое поле для ввода телефона;
  • date — поле для ввода даты. Справа от поля выводится значок, с помощью которого можно отобразить календарь;
  • time — поле для ввода времени. Справа от поля выводится значок, с помощью которого можно отобразить возможные значения;
  • datetime-local — поле для ввода даты и времени. Справа от поля выводится значок, с помощью которого можно отобразить календарь;
  • month — поле для ввода месяца и года. Справа от поля выводится значок, с помощью которого можно отобразить возможные значения;
  • week — поле для ввода номера недели и года. Справа от поля выводится значок, с помощью которого можно отобразить возможные значения.

С помощью параметра value мы можем указать значение по умолчанию, а с помощью параметра placeholder — текст подсказки:

<input type="text" value="Значение по умолчанию">
<input type="text" placeholder="Текст подсказки">

Если указан параметр autofocus, то после загрузки поле получит фокус ввода:

<input type="text" autofocus>

Параметр required указывает, что поле обязательно для заполнения:

<input type="text" required>

С помощью параметра pattern мы можем ограничить вводимое значение шаблоном регулярного выражения:

<input type="tel" placeholder="+0 (000) 000-00-00" required
pattern="\+[1-9] \([0-9]{3}\) [0-9]{3}-[0-9]{2}-[0-9]{2}">

Поля имеют следующие основные свойства:

  • value — значение элемента формы;
  • defaultValue — начальное значение, заданное параметром value;
  • disabled — если задано значение true, то поле является неактивным (отображается серым цветом);
  • maxLength — максимальное количество символов, которое может быть введено в поле;
  • type — тип элемента;
  • readOnly — если задано значение true, текст в поле нельзя редактировать, если false — можно.

Методы:

  • blur() — убирает фокус ввода с текущего элемента;
  • focus() — помещает фокус на текущий элемент;
  • select() — выделяет текст в поле.

Поддерживаются следующие события:

  • onblur — происходит при потере фокуса элементом формы;
  • onchange — наступает после изменения данных в поле и при переводе фокуса ввода на другой элемент либо при отправке данных формы. Наступает перед событием onblur;
  • onfocus — возникает при получении фокуса ввода.

Кроме перечисленных событий можно использовать стандартные события мыши и клавиатуры (см. разд. 7.7 и 7.8).

Поле для ввода многострочного текста

Поле для ввода многострочного текста, описываемое парным тегом <textarea>, поддерживает те же свойства, методы и события, что и простое поле ввода (см. разд. 8.2), за исключением свойства maxLength. Кроме того, поддерживается еще одно свойство:

  • wrap — режим переноса слов. Может принимать следующие значения:
  • off — не переносить слова;
  • physical — слова переносятся как на экране, так и при передаче данных серверу;
  • virtual — слова переносятся только на экране, но не при передаче данных серверу.

Для примера рассмотрим возможность добавления слов из текстового поля в поле для ввода многострочного текста (листинг 8.2). Добавить слово можно с помощью кнопки Добавить слово или с помощью клавиши <Enter>. Так как по умолчанию нажатие клавиши <Enter> приводит к отправке данных формы, то всплывание события прерывается. При нажатии кнопки Значение поля выводится текущее значение тега <textarea>.

Листинг 8.2. Добавление слов из текстового поля в поле <textarea>

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self' 'unsafe-inline'">
   <title>Пример использования поля &lt;TEXTAREA&gt;</title>
   <script>
      function frmSubmit() {
         let v = document.getElementById('txt1').value;
         console.log('Текущее значение: \n' + v);
         return false;
      }
      function btnClick() {
         let txt2 = document.getElementById('txt2');
         let text = txt2.value;
         if (text != '') {
            document.getElementById('txt1').value += text + '\n';
            txt2.value = '';
            txt2.focus();
         }
         else {
            console.log('Поле не заполнено!');
            txt2.focus();
         }
      }
      window.onload = function () {
         document.getElementById('txt2').onkeypress = function(e) {
            if (e.keyCode == 13) {
               btnClick();
               e.preventDefault();
            }
         }
      }
   </script>
</head>
<body>
   <form action="#" id="frm" onsubmit="return frmSubmit()">
      <div>
         Слово:<br>
         <input type="text" name="txt2" id="txt2"><br>
         <textarea name="txt1" id="txt1" cols="15" rows="10"></textarea>
         <br><input type="button" value="Добавить слово"
                    onclick="btnClick()"><br>
         <input type="submit" value=" Значение поля ">
      </div>
   </form>
</body>
</html>

Ввод чисел

Поле для ввода числового значения реализуется с помощью тега <input>, параметр type которого имеет значение number. Справа от поля Web-браузер отображает две кнопки с помощью которых можно увеличить или уменьшить значение на шаг, указанный в параметре step. Значение автоматически проверяется. Форма отправляется только в случае, если поле не заполнено или содержит положительное или отрицательное число. Если нужно исключить пустое значение, то следует дополнительно указать параметр required:

<input type="number" step="5" required>
<input type="number" step="0.5" required>

Если в параметре type указать значение range, то отобразится ползунок, с помощью которого можно выбрать числовое значение из диапазона. Элемент не содержит маркеров и меток, поэтому выставить значение можно только примерно. Для информирования пользователя о точном текущем значении нужно использовать дополнительные скрипты. Минимальное значение задается параметром min, максимальное — параметром max, текущее — параметром value, а шаг — параметром step:

<input type="range" min="0" max="100" value="10" step="2">

Элементы number и range поддерживают следующие основные свойства:

  • value — текущее значение;
  • min — минимальное значение;
  • max — максимальное значение;
  • step — шаг.

Список с возможными значениями

Тег <select> создает список с возможными значениями:

<select>
<option>Элемент1</option>
<option>Элемент2</option>
</select>

Основные свойства объекта списка:

  • disabled — если задано значение true, то список является неактивным (отображается серым цветом);
  • length — количество пунктов в списке (доступно и для записи);
  • multipletrue, если из списка можно выбрать сразу несколько элементов одновременно;
  • options — ссылка на коллекцию пунктов в списке;
  • selectedOptions — ссылка на коллекцию выбранных пунктов списка;
  • selectedIndex — номер выбранного пункта (нумерация начинается с нуля);
  • size — число одновременно видимых элементов списка;
  • type — тип элемента формы (select-multiple или select-one);
  • value — значение пункта, выбранного в списке.

Свойства пункта списка:

  • defaultSelected — пункт списка, выбранный изначально;
  • index — номер пункта в списке;
  • selectedtrue, если пункт выбран в списке;
  • disabled — если задано значение true, то пункт списка является неактивным (отображается серым цветом);
  • text — текст пункта списка;
  • value — значение пункта, выбранного в списке.

Методы:

  • blur() — убирает фокус ввода с текущего элемента формы;
  • focus() — помещает фокус на текущий элемент формы.

События:

  • onblur — наступает при потере фокуса элементом формы;
  • onchange — происходит после выбора нового пункта списка;
  • onfocus — наступает при получении фокуса ввода элементом формы.

Рассмотрим пример работы со списками. Документ, приведенный в листинге 8.3, демонстрирует следующие возможности:

  • добавление нового пункта списка. При заполнении первого поля и нажатии клавиши <Enter> фокус ввода перемещается во второе поле. При заполнении второго поля и нажатии клавиши <Enter> введенные значения добавляются в список. Вместо клавиши <Enter> можно воспользоваться кнопкой Добавить;
  • получение всех выбранных значений из списка с возможностью множественного выбора;
  • применение взаимосвязанных списков и получение значения выбранного пункта. При выборе элемента в первом списке загружаются соответствующие элементы во второй список. При выборе элемента во втором списке выводится сообщение со значением выбранного пункта.

Листинг 8.3. Обработка списков

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self' 'unsafe-inline'">
   <title>Пример обработки списков</title>
</head>
<body>
   <form action="#" id="frm">
      <!-- Добавление пункта в список  -->

      <script>
         function addOption() {
            let txt1 = document.getElementById('txt1');
            let txt2 = document.getElementById('txt2');
            let select1 = document.getElementById('select1');
            if (txt1.value != '' && txt2.value != '') {
               let i = select1.length++;
               select1.options[i].text = txt1.value;
               select1.options[i].value = txt2.value;
               txt1.value = '';
               txt2.value = '';
               txt1.focus();
            }
            else {
               console.log('Поле не заполнено!');
               txt1.focus();
            }
         }
         function press1(e) {
            if (e.keyCode == 13) {
               document.getElementById('txt2').focus();
               e.preventDefault();
            }
         }
         function press2(e) {
            if (e.keyCode == 13) {
               addOption();
               e.preventDefault();
            }
         }
      </script>
      <div>
         <b>Добавление пункта в список:</b><br><br>
         Текст пункта:<br>
         <input type="text" id="txt1" onkeypress="press1(event)">
         <br>Значение пункта:<br>
         <input type="text" id="txt2" onkeypress="press2(event)">
         <br><select id="select1">
         </select><br>
         <input type="button" value="Добавить"
                onclick="addOption()"><br><br>

         <!-- Список со множественным выбором  -->

         <script>
            function multi() {
               let msg = '';
               let select2 = document.getElementById('select2');
               if (select2.selectedOptions) {
                  let obj = select2.selectedOptions;
                  let count = obj.length;
                  for (let i = 0; i < count; i++) {
                     msg += obj[i].value + ' - ';
                     msg += obj[i].text + '\n';
                  }
               }
               else {
                  let count = select2.length;
                  for (let i = 0; i < count; i++) {
                     if (select2.options[i].selected) {
                        msg += select2.options[i].value + ' - ';
                        msg += select2.options[i].text + '\n';
                     }
                  }
               }
               console.log(msg);
            }
         </script>
         <b>Список со множественным выбором:</b><br><br>
         <select id="select2" size="5" multiple>
            <option value="1" selected>Элемент1</option>
            <option value="2">Элемент2</option>
            <option value="3">Элемент3</option>
            <option value="4">Элемент4</option>
            <option value="5">Элемент5</option>
            <option value="6">Элемент6</option>
         </select><br>
         <input type="button" value="Значения списка"
                onclick="multi()"><br><br>

         <!-- Взаимосвязанные списки  -->

         <script>
            let arr = [];
            arr[1] = ['Тема1 Элемент1', 'Тема1 Элемент2'];
            arr[2] = ['Тема2 Элемент1', 'Тема2 Элемент2', 
                      'Тема2 Элемент3'];
            let value1 = [];
            value1[1] = ['1', '2'];
            value1[2] = ['3', '4', '5'];
            function change1() {
               let index = document.getElementById('select3').value;
               let select4 = document.getElementById('select4');
               let count = arr[index].length;
               select4.length = count;
               for (i = 0; i < count; i++) {
                  select4.options[i].value = value1[index][i];
                  select4.options[i].text = arr[index][i];
               }
            }
            function change2() {
               let sel = document.getElementById('select4');
               let msg = 'Значение: ' + 
                          sel.options[sel.selectedIndex].value;
               msg += '\nТекст: '
                   + sel.options[sel.selectedIndex].text;
               console.log(msg);
            }
         </script>
         <b>Взаимосвязанные списки:</b><br><br>
         <select name="select3" id="select3" size="5"
                 onchange="change1()">
            <option value="1">Тема1</option>
            <option value="2">Тема2</option>
         </select><br>
         <select name="select4" id="select4" onchange="change2()">
            <option value="1" selected>Тема1 Элемент1</option>
            <option value="2">Тема1 Элемент2</option>
         </select>
      </div>
   </form>
</body>
</html>

Флажок и переключатели

Флажок и переключатели вставляются с помощью тега <input>, параметр type которого может принимать следующие значения:

  • checkbox — поле для установки флажка;
  • radio — элемент-переключатель.

Флажки и переключатели имеют следующие свойства:

  • value — значение текущего элемента формы;
  • checkedtrue, если флажок или переключатель находится во включенном состоянии;
  • defaultChecked — флажок или переключатель установлен по умолчанию. Содержит true или false;
  • disabled — если задано значение true, то элемент является неактивным (отображается серым цветом);
  • indeterminate — если true, то флажок находится в неопределенном состоянии, и false — в противном случае;
  • type — тип элемента.

Методы:

  • blur() — убирает фокус ввода с текущего элемента формы;
  • focus() — помещает фокус на текущий элемент формы.

События:

  • onblur — наступает при потере фокуса элементом формы;
  • onclick — возникает при выборе элемента;
  • onfocus — происходит при получении фокуса ввода элементом формы.

Чтобы найти выбранный элемент-переключатель в группе, необходимо перебрать все переключатели в цикле. Получить значение выбранного переключателя можно указав внутри квадратных скобок индекс элемента в группе. Рассмотрим это на примере (листинг 8.4).

Листинг 8.4. Обработка флажков и переключателей

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
      content="default-src 'self' 'unsafe-inline'">
   <title>Пример использования флажков и переключателей</title>
   <script>
      function btnClick() {
         let msg = '';
         if (document.getElementById('check1').checked) {
            msg = 'Флажок установлен\n';
            msg += 'Значение: ' + 
                   document.getElementById('check1').value + '\n';
         }
         else {
            msg = 'Флажок снят\n';
         }
         let value1 = '';
         let count = document.frm.radio1.length;
         for (i = 0; i < count; i++) {
            if (document.frm.radio1[i].checked) {
               value1 = document.frm.radio1[i].value;
               break;
            }
         }
         if (value1 == 'male') {
            msg += 'Пол: Мужской\n';
         }
         else {
            msg += 'Пол: Женский\n';
         }
         console.log(msg);
      }
   </script>
</head>
<body>
   <form action="#" name="frm" id="frm">
      <div>
         <input type="checkbox" name="check1" id="check1"
                value="yes" checked>
         Текст<br><br>
         Укажите ваш пол:<br>
         <input type="radio" name="radio1" id="radio1"
                value="male" checked>Мужской
         <input type="radio" name="radio1" id="radio2"
                value="female">Женский
         <br><br>
         <input type="button" value="Вывести значения" 
                onclick="btnClick()">
      </div>
   </form>
</body>
</html>

Поле для выбора файла

Поле для выбора файла вставляется с помощью тега <input>, параметр type которого имеет значение file:

<input type="file">

Поле для выбора файла поддерживает следующие параметры:

  • multiple — если параметр указан, то можно выбрать сразу несколько файлов:
<input type="file" multiple>
  • accept — задает поддерживаемые MIME-типы или расширения файлов (значения перечисляются через запятую):
<input type="file" accept="image/jpeg,image/png,image/gif">
<input type="file" accept="image/*">
<input type="file" accept=".gif,.jpg,.jpeg">

Все выбранные файлы доступны через коллекцию files. Если файлы выбраны, то свойство length будет иметь значение больше 0. Получить путь к выбранному файлу позволяет свойство path (листинг 8.5).

Листинг 8.5. Поле для выбора файла

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
      content="default-src 'self' 'unsafe-inline'">
   <title>Поле для выбора файла</title>
</head>
<body>
   <input type="file" id="file1">
   <button type="button" id="btn1">Проверить</button>
   <script>
      document.getElementById('btn1').addEventListener('click', () => {
         let file1 = document.getElementById('file1');
         if (file1.files.length === 0) {
            console.log('Файл не выбран');
         }
         else {
            console.log(file1.files[0].path);
         }
      });
   </script>
</body>
</html>

Выбор цвета

Элемент для выбора цвета реализуется с помощью тега <input>, параметр type которого имеет значение color. При щелчке на элементе отображается диалоговое окно (рис. 8.1), в котором можно выбрать цвет или ввести его значение вручную. Текущее значение задается с помощью параметра value в формате #RRGGBB:

<input type="color" value="#000000" id="color1">

Получить выбранное значение позволяет свойство value:

let color1 = document.getElementById('color1');
console.log(color1.value);

Рис. 8.1. Диалоговое окно для выбора цвета

Индикатор хода выполнения процесса

Парный тег <progress>, позволяет в графической форме отобразить текущее состояние хода выполнения процесса. Тег имеет следующие параметры:

  • value — текущее значение;
  • max — максимальное значение.

Пример:

<progress max="100" value="50"></progress>

Проверка корректности введенных данных

Все элементы управления можно поместить внутри формы. В этом случае внутри обработчика отправки формы (событие onsubmit) можно выполнить автоматическую проверку данных, внесенных пользователем в элементы управления. Для этого к элементам управления добавляем параметр required и правильно выбираем сам элемент, чтобы он соответствовал нашим требованиям. Например, для ввода E-mail выбираем элемент с типом email, а не text.

Выполнить проверку на корректность введенных данных сразу всех элементов позволяет метод checkValidity() объекта формы (листинг 8.6). Он возвращает true, если во все элементы управления формы занесены корректные данные, и false — в противном случае.

Листинг 8.6. Проверка корректности введенных данных

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self' 'unsafe-inline'">
   <title>Проверка корректности введенных данных</title>
</head>
<body>
   <form action="#" id="frm">
      <input type="email" name="email" required>
      <input type="submit" value="Проверить">
   </form>
   <script>
      let frm = document.getElementById('frm');
      frm.addEventListener('submit', (e) => {
         e.preventDefault();
         if ( !frm.checkValidity() ) {
            console.log('Введите корректные данные!');
         }
         else {
            console.log('Данные введены правильно');
         }
      });
   </script>
</body>
</html>

Элементы управления поддерживают следующие свойства:

  • validationMessage — возвращает текст сообщения об ошибке;
  • validity — сведения об ошибках. Содержит объект класса ValidityState, который поддерживает следующие свойства:
  • badInputtrue, если введенное значение неполное;
  • patternMismatchtrue, если введенное значение не совпадает с заданным шаблоном регулярного выражения, из параметра pattern);
  • rangeOverflowtrue, если введенное число больше указанного максимального значения;
  • rangeUnderflowtrue, если введенное число меньше указанного минимального значения;
  • stepMismatchtrue, если введенное число не укладывается в заданный интервал;
  • tooLongtrue, если введенная строка слишком длинная;
  • typeMismatchtrue, если введенное значение не соответствует требуемому типу;
  • valueMissingtrue, если обязательное поле пустое;
  • customErrortrue, если было задано иное сообщение об ошибке ввода данных;
  • validtrue, если введенное значение полностью корректно (и все перечисленные ранее свойства хранят значение false);
  • willValidate — содержит true, если значение элемента будет проверяться на корректность.

Пример проверки корректности ввода значения для конкретного элемента управления приведен в листинге 8.7.

Листинг 8.7. Свойство validity

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self' 'unsafe-inline'">
   <title>Свойство validity</title>
</head>
<body>
   <input type="email" name="email" id="email" required>
   <input type="button" id="btn1" value="Проверить">
   <script>
      let btn1 = document.getElementById('btn1');
      btn1.addEventListener('click', (e) => {
         let email = document.getElementById('email');
         if (!email.validity.valid) {
            console.log('Введите корректные данные!');
            console.log(email.validationMessage);
         }
         else {
            console.log('Данные введены правильно');
         }
      });
   </script>
</body>
</html>

Учебник по Electron js
Учебник по Electron js в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов