Login

Admin Input Field Character Count via jQuery

Author:
joshman
Posted:
December 10, 2008
Language:
JavaScript
Version:
Not specified
Score:
0 (after 0 ratings)

Use this code in change_form.html in your projects admin templates to add a character counter beside the input field(s) in admin to let users know how many characters they have remaining for a particular input field. The total number of characters allowed is determined by the max_length in your model for the models.CharField you're using this with.

This code is designed to add the counter after the input field, but could easily be customized to fit the style of any admin. If the number of characters remaining is 10 or less the background color changes to yellow to visually warn the user.

Usage Examples:
In this example only the input field with id=id_pull_quote will receive the counter:

 $(document).ready(function() {   
   $("#id_pull_quote").counter();   
 });

You could also apply the counter to all input fields on a page:

 $(document).ready(function() {
   $("form input[@maxlength]").counter();
 });

Note: You have to download jQuery to your project and place the appropriate call in order for this to work. The best place to do this is in the extrahead block. I left my call in as an example but your path and file name will probably vary.

Credit for base jQuery code goes to Brad Landis at bradlis7.com.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
{% extends "admin/change_form.html" %}
{% load i18n admin_modify adminmedia %}

{% block extrahead %}{{ block.super }}
<script type="text/javascript" src="../../../jsi18n/"></script>
<script type="text/javascript" src="/static/js/jquery-1.2.6.min.js"></script>
{{ media }}

<script type="text/javascript">
jQuery.fn.counter = function() {
  // setup initial counter display
  $(this).each(function() {
    var max = $(this).attr('maxlength');
    var val = $(this).attr('value');
    var cur = 0;
    if(val) // value="", or no value at all will cause an error
      cur = val.length;
    var left = max-cur;
    $(this).after("<span class='counter'>"
      + left.toString()+"</span> characters remaining");
    // Style as desired
    var c = $(this).next(".counter");
    c.css("margin-left","10px");
    c.css("padding", "0 3px 0 3px")
    c.css("border", "1px solid #ccc")
    if(left <= 10)
        c.css("background","#F4F379");
    else
        c.css("background","none");
 
    // setup counter to change with keystrokes 
    $(this).keyup(function(i) {
      var max = $(this).attr('maxlength');
      var val = $(this).attr('value');
      var cur = 0;
      if(val)
        cur = val.length;
      var left = max-cur;
      var c = $(this).next(".counter");
      c.text(left.toString());
      if(left <= 10)
          c.css("background","#F4F379");
      else
          c.css("background","none");
      return this;
    });
  });
  return this;
}

$(document).ready(function() {
  $("#id_pull_quote").counter();
});

//-->
</script>
{% endblock %}

More like this

  1. Django Collapsed Stacked Inlines by applecat 1 year, 8 months ago
  2. Django Collapsed Stacked Inlines by mkarajohn 3 years, 10 months ago
  3. Dynamically adding forms to a formset. OOP version. by halfnibble 9 years, 5 months ago
  4. Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 11 years, 6 months ago
  5. Django admin inline ordering - javascript only implementation by ojhilt 11 years, 11 months ago

Comments

Please login first before commenting.