Exercício de Programação #05 - JS - Contagem e Limite de Caracteres

21/11/2020

Nesse exercício faremos a contagem dos caracteres de entrada do usuário e exibiremos o limite de caracteres e bloquearemos as inserções após o limite.

Limite de caracteres com JS

index.html

No html vamos criar os elementos de marcação para contagem e limite de caracteres:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Contagem e Limite de Caracteres</title>
</head>

<body>
    <textarea name="msg" id="msg" cols="60" rows="10" maxlength="10"></textarea>
    <div class="result">Máximo de caracteres: 10</div>

    <script src="javascript.js"></script>
</body>
</html>

javascript.js

No Javascript utilizaremos o evento keyup pra realizar a contagem dos caracteres digitados pelo usuário limitando que ele digite mais que o permitido:

(function(win,doc){
    'use strict';

    let msg=doc.querySelector('#msg');
    msg.addEventListener('keyup',(event)=>{
        let sub=event.target.maxLength - event.target.textLength;
        doc.querySelector('.result').innerHTML=`Máximo de caracteres: ${sub}`;
    },false);

})(window,document);

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Exercício de Programação #04 - CSS - Menu Dropdown

Nesse tutorial trabalharemos com um exercício de CSS visando aprimorar nossas técnicas em estilizar nossos websites.

Exercício de Programação #06 - CSS - Divisão de Template com CSS Grid

Na aula de hoje faremos um exercício de CSS Grid, onde poderemos praticar o fatiamento do layout de um website passando pelas propriedades do CSS e do HTML.

Exercícios

Nessa playlist aprenderemos na prática a programar, utilizando para isso exercícios de programação nas mais variadas linguagens e tecnologias.