Count characters in text field

Question

I have a simple custom developed list that contains three columns, one of these columns should take maximum 7 characters, otherwise problems are caused, thus I want to make the user aware of the number of characters typed / remaining.

I have tried the below code snippet and css to achieve this:

<script src="../../Style Library/Scripts/jquery-1.9.0.min.js" type="text/javascript" ></script>
<script type="text/javascript">
// ----------- start show Nr of Characters left for the header
(function($){  
$.fn.fieldLimit = function(options) {  
return this.each(function() {  
var characters = 7;
$(this).keyup(function(){
if($(this).val().length > characters){
$(this).val($(this).val().substr(0, characters));
}   
var remaining = characters - $(this).val().length;
$(options.result).html(remaining + " tecken kvar ");         
});
});  
};  
})(jQuery);
// ----------- start jQuery DocReady
$(document).ready(function() {
// -- Characthers left
$('td.ms-formbody > span').prepend("<span class='CharactersLeft'></span>");
$('input[title$=FieldDisplayName]').fieldLimit({result:".CharactersLeft"});
})
</script>

<style type="text/css">
/* Count characters for page title */
.CharactersLeft{
font-family:Calibri;
font-size:10px;
color:red;
display:block
}
</style>
</asp:Content>

I have inserted the above code snippet inside the lists NewForm.aspx, particularly inside a PlaceHolderAdditionalPageHead content place holder.

This should result in a red colored message above the field as soon as the user begins typing, why is it not happening?

Any ideas would be appreciated.

Answer 1

this function set field limit characters:

function setFieldLimitCharacters( field, limit )
{
    field.unbind( 'keyup change input paste' ).bind( 'keyup change input paste',function(e){
        if( $( this ).val().length > limit )
        {
            $( this ).val( $( this ).val().substring( 0, limit ) );
        }
    });
}

usage:

setFieldLimitCharacters( $( "#fieldID" ), 7 );