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

Счетчик символов полезен, если вы хотите установить ограничение на количество символов в поле ввода или текстовой области. Удобно показывать количество написанных символов и общее количество символов, которое может принять поле ввода или текстовая область (если добавлено ограничение). Итак, приступим к созданию счетчика символов.

Счетчик символов.

В этом посте мы собираемся сделать счетчик из двух символов. Счетчик первого символа с пробелом (счетчик символов, включая пробелы между ними) И счетчик второго символа без пробела (без пробела в символах).

Счетчик символов, включая пробел.

Сначала я создал два файла index.html и index.css, а затем связал файл css с файлом html и для подсчета символов я использовал javascript, который я добавил в файл html под закрывающим тегом body в теге script. Ниже приведены шаги, которые я создал для вас, чтобы сделать счетчик символов.

Шаг 1: Создайте базовый дизайн.

Итак, сначала я создал поле, а внутри него я добавил тег h2 для заголовка и тег p, чтобы показать номер. символов и область текста.

    <div class="box">
        <h2>Character counter</h2>
        <p class="counter"></p>
        <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
    
    </div>
*{
    padding: 0;
    margin: 0;
}
body{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: relative;
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 300px;
    text-align: center;
}
h2{
    font-size: 40px;
    margin-bottom: 20px;
}
.counter{
    font-size: 30px;
    font-weight: bold;
    text-align: left;
}
#textarea{
    width: 100%;
    border: 2px solid #000;
    font-size: 30px;
}

Выход :

В общем, я создал базовый дизайн. Счетчик будет отображаться между тегом h2 и текстовой областью.

Шаг 2: Добавьте JavaScript для подсчета и отображения количества символов.

Теперь давайте добавим JavaScript для подсчета и отображения количества символов внутри тега p (класс счетчика).

Итак, сначала я определил переменные для текстовой области и счетчика. Затем добавьте событие oninput в текстовую область, которая вызывает функцию.

В этой функции я создал одну переменную с символами имени и сохранил внутри нее длину значения текстовой области (которое дает количество символов). И добавьте переменную этого персонажа в класс счетчика.

    let counter = document.querySelector('.counter');
    let textarea = document.getElementById('textarea');

    textarea.oninput = function(){
        let characters = textarea.value.length;
        counter.innerHTML = 'words : ' + characters;

    }

Выход :

Так вот как вы можете сделать счетчик символов. Но этот счетчик символов также считает пробелы. Итак, давайте сделаем счетчик символов, который считает только символы.

Счетчик символов без пробелов.

Сделать счетчик символов без пробелов не так уж и сложно. Нам просто нужно заменить пробелы на пустые или без пробелов («» на «») на replace(/\s+/g,»,»).

    let counter = document.querySelector('.counter');
    let textarea = document.getElementById('textarea');

    textarea.oninput = function(){
        let characters = textarea.value.replace(/\s+/g,"").length;
        counter.innerHTML = 'words : ' + characters;

    }

Выход :

Как вы можете видеть на изображении выше, символ, присутствующий в текстовой области, равен 9, поэтому счетчик символов показывает 9, даже если я включил пробел между ними.

Вам также может понравиться:

Окончательный код:

Вы найдете окончательный код здесь.

Вот и готов счетчик символов с пробелами и без пробелов.

Если у вас есть какие-либо вопросы или предложения, вы можете написать в разделе комментариев.

Первоначально опубликовано на https://www.maketechstuff.com.