Question

I have this script

http://jsfiddle.net/hungerpain/8gKs4/2/

I'm counting down characters left when im typing in text area. But when I delete characters it doesnt count back, how can i do that ?

HTML

<table>
        <tr>
            <td colspan="4" style="text-align:center;">NOTES
                <br/>
                <textarea class="sam_notes maxed" maxlength="750" name="sam_notes" style="height:100px;width:90%;margin:0 auto;"></textarea>
                <br/> <span style="font:normal 11px sans-serif;color:#B00400;">
             <span class='counter_msg'></span>
    </span>
            </td>
        </tr>
    </table>

JS

$('td').on('focus keypress', '.sam_notes', function (e) {

    var $this = $(this);
    var msgSpan = $this.parents('td').find('.counter_msg');
    var ml = parseInt($this.attr('maxlength'), 10);
    var length = this.value.length;
    var msg = ml - length + ' characters of ' + ml + ' characters left';

    msgSpan.html(msg);
});
Was it helpful?

Solution

Keypress only fires on character keys use keydown instead.

FIDDLE

OTHER TIPS

isnt this easier? purejs;

HTML

<textarea id="txt" onkeyup="count(255,'txt','msg');" maxlength="255"></textarea>

JS

function count(c,txtid,msgid){
            document.getElementById(txtid).innerText = c - document.getElementById(msgid).value.length;
            }

regards, Tymofek;

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top