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, так что все содержимое может быть отображено!

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

Почему в Python есть оператор &quot;pass&quot;?
Почему в Python есть оператор "pass"?

05.05.2023 14:00

Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.

Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом

05.05.2023 11:59

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря своим методам, они делают код очень простым для понимания и читабельным.

JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы

05.05.2023 11:57

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний, то, не теряя времени, практикуйте наш бесплатный онлайн тест 1100+ JavaScript MCQs и развивайте свои навыки и знания.

Массив зависимостей в React
Массив зависимостей в React

05.05.2023 09:44

Все о массиве Dependency и его связи с useEffect.