В продолжение предыдущей статьи 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, так что все содержимое может быть отображено!
Конечно, в различных контекстах веб-страницы и пользователи будут иметь различные потребности, так что одна и та же концепция может быть применена к различным вводам, чтобы пользователю было удобно или чтобы передать то, что мы хотим сказать!
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.