-2

Bom dia Galera,

Tudo bem ?

Estou precisando criar um campo que conte a quantidade de caracteres especiais e exiba em um input.

Essa é minha função criada para contar os caracteres.

function textCounter(field, countfield, maxlimit) {
    if (field.value.length > maxlimit)
    field.value = field.value.substring(0, maxlimit);
    else 
    countfield.value = maxlimit - field.value.length;
}

Porem não estou conseguindo exibi-la no input.

Alguém pode me ajudar ?

Segue codigo html.

                            <tr><td colspan="3"><b>Descreva aqui suas atribuições:</b></td></tr>
                            <td colspan="3">
                               <textarea maxlength="5000" style="width:99.3%; ; border:1px solid #CCC; min-height:120px" name=message wrap=physical onKeyDown="textCounter(this.form.message,this.form.remLen,500);autoResize()" onKeyUp="textCounter(this.form.message,this.form.remLen,500);" id="txatividades"><?echo exibirCaracter($descricao);?></textarea>
                            </td>
                            <tr>
                                                    <td align="right">
                                                        <table border="0" cellpadding="0" cellspacing="0" style="font-size:10px">
                                                            <tr>
                                                                <td>
                                                                    <font color="#0066FF" size="1">(Max: 500 caracteres) - </font>
                                                                </td>
                                                                <td>&nbsp;
                                                                    
                                                                </td>
                                                                <td  align="center">
                                                                    Restam:
                                                                </td>                                                                
                                                                <td>
                                                                     <input readonly type=text name=remLen1 size=3 maxlength=3 value="500" style="border:0px; text-align:center;border-bottom-right-radius:10px; font-size:10px">
                                                                </td>
                                                            </tr>                                
                                                        </table>
                                                    </td>
                                                    
                                                </tr>

já usei o required para chamar a page que carrega função. mas nada acontece

1 Resposta 1

0

Bem vindo ao SO.

Fiz um exemplo bem simples, creio que vai te auxiliar.

Mantive o html que você enviou e removi o javascript inline.

    <tr>
        <td colspan="3"><b>Descreva aqui suas atribuições:</b></td>
    </tr>
    <td colspan="3">
        <textarea maxlength="5000" style="width:99.3%; ; border:1px solid #CCC; min-height:120px" name="message" wrap=physical id="txatividades"></textarea>
    </td>
    <tr>
        <td align="right">
            <table border="0" cellpadding="0" cellspacing="0" style="font-size:10px">
                <tr>
                    <td>
                        <font color="#0066FF" size="1">(Max: 500 caracteres) - </font>
                    </td>
                    <td>
                    </td>
                    <td  align="center">
                        Restam:
                    </td>
                    <td>
                         <input readonly type=text name=remLen1 size=3 maxlength=3 value="500" style="border:0px; text-align:center;border-bottom-right-radius:10px; font-size:10px">
                    </td>
                </tr>
            </table>
        </td>
    </tr>

<script type="text/javascript">

var messageLength = document.getElementsByName('message');

messageLength[0].onkeyup = function(){
    textCounter(this);
};

messageLength[0].onkeydown = function(){
    textCounter(this);
};


function textCounter(elementTextArea, maxlimit = 500) {
    var messageLength = elementTextArea.value.length;
        remainsLength = document.getElementsByName('remLen1');

    if (messageLength <= maxlimit) {
        remainsLength[0].value = maxlimit - messageLength;
        return;
    }

    elementTextArea.value = elementTextArea.value.substring(0, maxlimit);
}

    //Outra opção de uso abaixo
    /*
    var messageLength = document.getElementsByName('message');
    messageLength[0].addEventListener("keyup", textCounter);
    messageLength[0].addEventListener("keydown", textCounter);
    function textCounter() {
        var maxlimit = 500;
            messageLength = this.value.length;
            remainsLength = document.getElementsByName('remLen1');

        if (messageLength <= maxlimit) {
            remainsLength[0].value = maxlimit - messageLength;
            return;
        }

        this.value = this.value.substring(0, maxlimit);
    }
    */
</script>

Recomendo as leituras

https://developer.mozilla.org/pt-BR/docs/Web/API/GlobalEventHandlers/onkeyup

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onkeydown

https://developer.mozilla.org/pt-BR/docs/Web/API/Element/addEventListener

https://developer.mozilla.org/pt-BR/docs/Web/API/Document/getElementsByName

https://developer.mozilla.org/pt-BR/docs/Web/API/Document/getElementById

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .