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 мы можем регулировать высоту текстовой области, проверяя текущую высоту после того, как пользователь набрал текст

Код:

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

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