В продолжение предыдущей статьи 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, так что все содержимое может быть отображено!
Конечно, в различных контекстах веб-страницы и пользователи будут иметь различные потребности, так что одна и та же концепция может быть применена к различным вводам, чтобы пользователю было удобно или чтобы передать то, что мы хотим сказать!
05.05.2023 14:00
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
05.05.2023 11:59
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря своим методам, они делают код очень простым для понимания и читабельным.
05.05.2023 11:57
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний, то, не теряя времени, практикуйте наш бесплатный онлайн тест 1100+ JavaScript MCQs и развивайте свои навыки и знания.
05.05.2023 09:26