django admin - count characters and show remaining space in text fields which are limited

django, django-admin, python

Solution

(I created a form field widget to achieve this: https://github.com/timmyomahony/django-charsleft-widget)

You don't override admin templates, instead you create a widget (based on the default `TextInput` widget) that adds some extra JS to show the remaining characters:

class CharsLeftInput(forms.TextInput):                             
    def render(self, name, value, attrs=None):
        if value is None:
            value = ''
        final_attrs = self.build_attrs(attrs, type=self.input_type, name=name)
        if value != '':
            final_attrs['value'] = force_unicode(self._format_value(value))
        maxlength = final_attrs.get('maxlength',False)
        if not maxlength:
            return mark_safe(u'<input%s />'%flatatt(final_attrs))
        current = force_unicode(int(maxlength) - len(value))
        html = u"""
            <span class="charsleft charsleft-input">
            <input %(attrs)s /> 
            <span><span class="count">%(current)s</span> characters remaining</span>
            <span class="maxlength">%(maxlength)s</span>
            </span>
        """ % { 
            'attrs':flatatt(final_attrs),
            'current':current,
            'maxlength':int(maxlength),
        }
        return mark_safe(html)

    class Media:
        css = {'screen':('charsleft-widget/css/charsleft.css',),}
        js = ('charsleft-widget/js/charsleft.js',)

and the javascript:

jQuery(function($){
    $.fn.charsLeft = function(options){
        var defaults = {        
            'source':'input',
            'dest':'.count',
        }
        var options = $.extend(defaults, options);

        var calculate = function(source, dest, maxlength){
            var remaining = maxlength - source.val().length;
            dest.html(remaining);
            /* Over 50%, change colour to orange */
            p=(100*remaining)/maxlength;
            if(p<25){
                dest.addClass('orange');
            }else if(p<50){
                dest.addClass('red');
            }else{
                dest.removeClass('orange red');
            }
        };

        this.each(function(i, el) {
            var maxlength = $(this).find('.maxlength').html();
            var dest = $(this).find(options.dest);
            var source = $(this).find(options.source);
            source.keyup(function(){
                calculate(source, dest, maxlength)
            });
            source.change(function(){
                calculate(source, dest, maxlength)
            });
        });
    };

    $(".charsleft-input").charsLeft({
            'source':'input',
            'dest':".count",
    });
});

and you can use the widget on particular `CharField` fields in your admin model:

from django.contrib import admin
from widgets import CharsLeftInput

class TestForm(forms.Form):
    field_one = forms.CharField(widget=CharsLeftInput())
    ....

class TestAdmin(admin.ModelAdmin):
    form = TestForm

you will probably need to play around with it to get exactly what you want, but you can see the code in the repo along with some more examples

Problem

Original source