Ограничение на количество символов

В этом уроке мы разберем создание ограничение на количество символов. Зачем это? Чаще всего это используется в формах. Благодаря этому вы можете контролировать максимальное количество вводимых символов от пользователя. Это можно сделать за 4 строки jquery кода.


 Ограничение на количество символов

Разметка HTML

Первое что нам надо - это разметка HTML. В теге head мы поместим ссылку на jquery.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Ограничение на количество символов | Rapprogtrain Демо</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
	
	

Теперь добавим форму. Она будет состоять из label, textarea и span, который будет отвечать за оставшиеся символы.


<form>
  <label>Максимум 15 символов</label>
  <textarea id="textarea" maxlength="15"></textarea>
  <span id="rem-chars">15</span> символов осталось
</form>

Css

Теперь немного стилизуем нашу форму.


* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body, textarea {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 18px;
}
body, textarea {
	color: #222;
}
body {
	height: 100vh;
	overflow: hidden;
}
form {
    position: absolute;
	margin: auto;
	top: 50%;
	left: 50%;
	width: calc(100% - 3em);
	max-width: 30em;
	transform: translate(-50%,-50%);
}
label {
	display: block;
	margin-bottom: 0.75em;
}
textarea {
	border: 0;
	border-radius: 0.5em;
	box-shadow: 0 0 0 0.1em #a8ceee inset;
	margin: 0 auto 0.75em auto;
	padding: 0.75em;
	resize: none;
	width: 100%;
	height: 5em;
}
textarea:focus {
	box-shadow: 0 0 0 0.1em #55abee inset;
	outline: 0;
}
textarea::placeholder {
	color: #aaa;
}

jQuery

Последнее, что нам надо сделать, это добавить jquery код.


$('#textarea').keyup(function() {
    var textlen = 15 - $(this).val().length;
    $('#rem-chars').html(textlen);
  });
 

Первое, что мы делаем, это добавляем функцию к textarea. Она будет отвечать за вводимые символы. Дальше, мы ставим лимит в 15 символов и вычитаем их с количесвом вводимых символов в textarea.