Count php/js characters

Question

Good morning Galera,

All right ?

I need to create a field that counts the amount of special characters and displays in an input.

This is my function created to count characters.

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

However I’m not able to display it in input.

Can someone help me ?

Follows html code.

                            <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>

I’ve already used required to call the page that loads function. but nothing happens

Answer 1

Welcome to the OR.

I made a very simple example, I think it will help you.

I kept the html you sent and removed the inline javascript.

    <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>

I recommend the readings

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

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

https://developer.mozilla.org/en-US/docs/Web/API/Element/addEventListener

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById