JS - События опций формы

RedDeveloper
23.04.2023 08:58
JS - События опций формы

JS - События опций формы

В продолжение предыдущей статьи CSS - стили, связанные с вводом формы , в этой статье мы будем использовать JS для взаимодействия с формами, на этот раз он будет в основном запускать события, основанные на вводе пользователя и выбранных элементах!

Определение соответствия вводимых пользователем данных ожиданиям

<form action="/action_page.php">
  <label for="checktest" >請輸入「今天是最棒的一天」:</label><br>
  <input type="text" id="checktest" name="checktest" data-check="今天是最棒的一天"><br>
  <input id="submit-btn" type="submit" value="Submit">
</form>
jQuery( document ).ready(function($){
  let check = $('#checktest').data('check');
  $('#submit-btn').click(function(e){
    if ( check !== $('#checktest').val() ){
      e.preventDefault();
      window.alert('請再確定是否輸入正確 >"<');
    }
  })
});

Если ввод не соответствует вашим ожиданиям, вы можете вывести окно или сделать что-то еще, или, конечно, вы можете использовать предыдущий Проект - Регулярные выражения для решения проблем с форматированием ввода.

Изменение высоты текстовой области на лету в зависимости от вводимого текста

При вводе текста в текстовую область текст, превышающий высоту текстовой области, обычно прокручивается:

При вводе текста в текстовую область текст превышающий высоту текстовой области обычно

Но с помощью JS мы можем регулировать высоту текстовой области, проверяя текущую высоту после того, как пользователь набрал текст

Но с помощью JS мы можем регулировать высоту текстовой области проверяя текущую высоту

Код:

<textarea id="textArea" style="overflow:hidden">
</textarea>
jQuery( document ).ready(function($){ 
  $('#textArea').keyup(function(){
    textAreaAdjust();
  });
}); 

function textAreaAdjust() {
  let element = $('#textArea');
  $(element).css('height', '1px');
  $(element).css('height', ($(element).prop('scrollHeight'))+"px");
}

Приведенный выше код определяет значение scrollHeight после того, как пользователь набрал текст (keyup), и подгоняет высоту текстовой области к значению scrollHeight, так что все содержимое может быть отображено!

Конечно, в различных контекстах веб-страницы и пользователи будут иметь различные потребности, так что одна и та же концепция может быть применена к различным вводам, чтобы пользователю было удобно или чтобы передать то, что мы хотим сказать!

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.